Incorrect Visibility of Button Content in Auth Pages During Loading
Closed this issue ยท 3 comments
Issue Summary
The button content remains visible while the loading indicator is active, contrary to expected behavior where the button content should be hidden during loading.
Steps to Reproduce
- Navigate to the page containing the button.
- Trigger the action that initiates the loading process, such as submitting a form.
- Observe that the button content remains visible despite the loading indicator being active.
Actual Results
The button content remains visible while the loading indicator is active, causing confusion to users and potentially leading to unintended interactions with the button during loading.
Expected Results
During loading, the button content should be hidden, and only the loading indicator should be displayed to indicate to the user that the action is in progress.
Evidence
To address the issue where the button content remains visible during loading on the authentication pages, it's essential to focus on how the loading
prop is managed within the Button
component and the handling of the loadingSubmitState
in the form where the button is used. The Button
component is designed to display a loading spinner and disable interaction when the loading
prop is true, which should also hide the button's content. However, if the button content is still visible, it suggests that the conditional rendering based on the loadingSubmitState
might not be functioning as intended or there could be interference from custom styles or other components on the page.
To resolve this, you should:
- Verify the implementation of the
loading
prop in theButton
component to ensure it correctly hides the button content when active. - Check the
loadingSubmitState
variable in the form to confirm it's correctly toggled and passed to theButton
component. - Review any custom CSS or components (such as
Tooltip
,Link
, orIcon
) used on the authentication pages that might affect the visibility of the button content during loading.
If these steps do not resolve the issue, consider examining the AuthContainer
component for any custom loading states that might overlap or interfere with the button's loading state. Adjustments in the handling of the loading
prop, loadingSubmitState
, or custom styles may be necessary to ensure the expected behavior during the loading process.
For specific guidance, refer to the implementation details in the Button.tsx
and related components or styles that might influence the button's behavior during loading.
Details
Sources
- [CAL-2054] UI: We need feedback after clicking buttons
- apps/web/pages/signup.tsx
- packages/ui/components/button/Button.tsx
- packages/app-store/routing-forms/components/FormActions.tsx
- packages/ui/components/button/button.test.tsx
- apps/web/pages/auth/verify.tsx
- apps/web/components/ui/AuthContainer.tsx
About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.
Help me be more useful! Please leave a ๐ if this is helpful and ๐ if it is irrelevant.
To continue the conversation, mention @dosu.
i would like to work on this issue
@Anas1005 This is the expected behaviour