Skip to content

feat: add optimistic UI on AmountInput primary action (Closes #853) - #905

Closed
waterWang wants to merge 1 commit into
Creditra:mainfrom
waterWang:feat/optimistic-ui-amountinput-853
Closed

waterWang wants to merge 1 commit into
Creditra:mainfrom
waterWang:feat/optimistic-ui-amountinput-853

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Adds optimistic UI feedback to the AmountInput primary action (Continue button). When isSubmitting is true:

  • Continue button shows an inline spinner and "Processing…" label via the existing PendingButton component
  • All interactive elements are disabled (stepper buttons, number input, Max button, preset chips, Back button)
  • Root container gets aria-busy="true" for screen reader announcements
  • Disabled styling (disabled:opacity-40 disabled:cursor-not-allowed) applied consistently

The revert-on-failure pattern is handled by the parent component — the parent sets isSubmitting=false on error, which restores the normal Continue button and re-enables all inputs.

Changes

  • AmountInput.tsx: Added isSubmitting prop, integrated PendingButton, disabled all interactive elements when submitting
  • AmountInput.test.tsx: Added 5 tests covering spinner display, label swap, disabled state, and aria-busy behavior

Closes #853

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 optimistic UI on AmountInput primary action [b#040]

2 participants