[UI/UX Design] Design loading, disabled, and success states for auth form submit buttons

[thlpkee20-wq]

Description

This is a UI/UX design task to design the submit-button states for the auth forms (Login, Signup, ForgotPassword). The buttons currently have no pending/loading or disabled treatment, so users get no feedback during submission and can double-submit. Design clear loading/disabled/success affordances.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/pages/Login.tsx, src/pages/Signup.tsx, src/index.css (.btn-primary)
• Loading state must communicate via aria-busy/text, not a spinner alone

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/button-loading-states
• Implement changes
  • Design loading, disabled, and brief success states for the primary submit button
  • Prevent double submission visually and via disabled state
  • Document the button-state pattern in the design system
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • loading announcement, disabled contrast, reduced motion spinner, focus retention, mobile
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: auth submit button loading and disabled states

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours