Skip to content

feat: implement button feedback states (idle/loading/success/error)#445

Open
Vera3289 wants to merge 1 commit into
dev-fatima-24:mainfrom
Vera3289:feat/button-feedback-states
Open

feat: implement button feedback states (idle/loading/success/error)#445
Vera3289 wants to merge 1 commit into
dev-fatima-24:mainfrom
Vera3289:feat/button-feedback-states

Conversation

@Vera3289
Copy link
Copy Markdown

@Vera3289 Vera3289 commented Jun 1, 2026

Summary

Resolves #235

Action buttons (Connect Wallet, Issue Vaccination, Verify) now cycle through idle → loading → success/error → idle states.

Changes

  • useButtonState hook – manages state transitions with configurable reset delay
  • FeedbackButton component – renders state-aware label/icon, fixed min-width prevents layout shift, aria-busy + aria-live for screen reader announcements
  • NavBar – Connect Wallet uses FeedbackButton
  • IssuerDashboard – Issue Vaccination NFT uses FeedbackButton
  • VerifyPage – Verify button uses FeedbackButton

Acceptance Criteria

  • Button shows spinner label and is disabled during async operation
  • On success, button briefly shows checkmark label before returning to idle
  • On error, button shows error label before returning to idle
  • Button width does not change between states (fixed min-width)
  • All states are keyboard accessible and announced to screen readers (aria-busy, aria-live)

…ev-fatima-24#235)

- Add useButtonState hook managing idle→loading→success|error→idle transitions
- Add FeedbackButton component with fixed min-width to prevent layout shift
- Apply FeedbackButton to Connect Wallet (NavBar), Issue Vaccination (IssuerDashboard), and Verify (VerifyPage)
- Buttons are disabled and aria-busy during loading; states announced via aria-live

Closes dev-fatima-24#235
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Jun 1, 2026

@Vera3289 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

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.

[FRONTEND] Implement button feedback states (idle → loading → success → error)

1 participant