Incorrect Visibility of Button Content in Auth Pages During Loading

[Anas1005]

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

1. Navigate to the page containing the button.
2. Trigger the action that initiates the loading process, such as submitting a form.
3. 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

[dosubot]

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 the Button 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 the Button component.
• Review any custom CSS or components (such as Tooltip, Link, or Icon) 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.

[smitgol]

i would like to work on this issue