Skip to content

feat: add loading states to form buttons#10

Open
PranavAgarkar07 wants to merge 1 commit into
Canopus-Labs:mainfrom
PranavAgarkar07:feature/loading-state-form-buttons
Open

feat: add loading states to form buttons#10
PranavAgarkar07 wants to merge 1 commit into
Canopus-Labs:mainfrom
PranavAgarkar07:feature/loading-state-form-buttons

Conversation

@PranavAgarkar07
Copy link
Copy Markdown

Summary

Adds loading state with spinner and disabled state to all form submission buttons across the application. Prevents double-submissions and improves UX by giving users clear visual feedback during async operations.

Changes Made

🆕 New: Reusable Button Component

  • frontend/src/components/Button/Button.jsx — A reusable <Button> component that encapsulates:
    • Loading state with CSS-only spinner animation
    • Disabled state handling
    • Three variants: primary (gradient), secondary, danger
    • Icon support with hover transitions
    • Configurable loading text

♻️ Refactored: Login & SignUp

  • frontend/src/pages/Auth/Login.jsx — Replaced inline <button> with shared <Button> component
  • frontend/src/pages/Auth/SignUp.jsx — Replaced inline <button> with shared <Button> component

🆕 Added: Interview Experiences Submit

  • frontend/src/pages/InterviewExperiences/InterviewExperiences.jsx — Added submitting state with spinner, disabled button, and "Submitting..." text during form submission

Related Issue

Closes #3

GSSOC 2026

This contribution is part of GSSOC 2026 by @PranavAgarkar07

Checklist

  • Loading state prevents double-submissions
  • Spinner provides visual feedback
  • Button is disabled during submission
  • Consistent gradient styling across auth forms
  • Reusable component follows DRY principles
  • Code refactored without changing functionality

- Create reusable Button component with spinner, disabled state, and gradient styling
- Refactor Login.jsx to use new Button component
- Refactor SignUp.jsx to use new Button component
- Add loading state to Interview Experiences submit form

Closes Canopus-Labs#3

GSSOC 2026 Contributor: @PranavAgarkar07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Loading State to Form Buttons

1 participant