Incorrect Visibility of Button Content in Auth Pages During Loading about cal.com HOT 3 CLOSED

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.

To continue the conversation, mention @dosu.

from cal.com.

i would like to work on this issue

from cal.com.

@Anas1005 This is the expected behaviour

from cal.com.