feat(ux): add processing/loading state to BillingProfileCard (#273)#370
Closed
jd5073356-max wants to merge 1 commit into
Closed
feat(ux): add processing/loading state to BillingProfileCard (#273)#370jd5073356-max wants to merge 1 commit into
jd5073356-max wants to merge 1 commit into
Conversation
…fy#273) BillingProfileCard had no in-card feedback while an action was processing, so the card looked idle and could be clicked repeatedly. - Add an optional `isProcessing` prop (default false). - While processing: show a Loader2 spinner, set `aria-busy`, dim and disable the card (pointer-events-none), and guard the click handler so the action cannot be triggered twice. - Restore the normal interactive state when processing completes. - Keep the colorblind-safe status badges intact. Adds BillingProfileCard.test.tsx covering normal/processing states, duplicate activation prevention, status badges, type label and dark theme. Closes Grainlify#273
4 tasks
Contributor
|
hey @jd5073356-max, thanks for jumping in! closing this pr because the author needs to be assigned to the linked issue (#273) before opening a pr. please comment on the issue requesting assignment, wait to be assigned, then re-raise your pr. this keeps work fairly distributed across contributors. hope to see a revised pr from you soon! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #273
What
BillingProfileCard(src/features/settings/components/billing/BillingProfileCard.tsx) invoked its click handler with no in-card feedback, so while an action was processing the card looked idle and could be clicked repeatedly.Changes
isProcessing?: boolean(defaultfalse, documented with TSDoc).Loader2spinner (role="status",aria-label="Processing"), matching the existing spinner pattern inApplicationCard.tsx;aria-busy;opacity-60,pointer-events-none,cursor-default) with hover affordances removed;isProcessingreturns tofalse.BillingTabis untouched — the prop is optional and backward compatible.Tests
New
BillingProfileCard.test.tsx: normal click works; processing shows the spinner +aria-busyand blocks duplicate activation; state restores after processing; plus status-badge, type-label and dark-theme coverage.Verification
npm run typecheck— passes.BillingProfileCard.test.tsx— 7/7 pass. Coverage of the file: 100% lines / 100% statements / 100% functions.Security
None.