Add an in-app loading state to StreamRow action buttons and announce success/failure accessibly

[greatest0fallt1me]

Description

This is a UI/UX issue. app/components/StreamRow.tsx tracks isProcessing while a pause/start/withdraw POST is in flight, but the action button does not show a spinner/disabled visual or set aria-busy, and success is not announced (only errors surface via ErrorToast). Polish the action button's loading and result feedback so the row clearly reflects in-flight and completed actions. This issue covers micro-interaction and status-message accessibility.

Requirements and Context

• While isProcessing, show a disabled + spinner/label state on the action button and set aria-busy="true".
• On success, announce via a polite live region (or the shared toast system) and reflect the resulting status visually.
• Keep the existing ErrorToast retry path; ensure focus is not lost when the button toggles state.
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b task/streamrow-action-loading

2. Implement changes
   • app/components/StreamRow.tsx
   • app/globals.css (button busy/spinner styles)
3. Test and commit
   • npm test -- StreamRow
   • Cover edge cases (rapid clicks, failure)

Example commit message

task: add accessible loading and success feedback to StreamRow actions

Acceptance Criteria

• Action button shows disabled+busy visual while processing
• aria-busy is set during the request
• Success is announced; focus is preserved
• Existing error/retry behavior intact

Guidelines

• WCAG 2.1 AA: 4.1.3 status messages, 2.4.3 focus order
• Clear documentation and inline comments
• Timeframe: 96 hours

[iamTissan]

@iamTissan has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Hey team! I'm Tissan, a software developer working with Next.js, TypeScript, and accessible UI/UX patterns. I’d love to take on this issue to enhance the StreamRow component. Implementing micro-interactions like spinner transitions and disabled visual states while strictly adhering to WCAG 2.1 AA guidelines, specifically managing aria-busy="true", ensuring focus retention, and setting up polite live-region announcements for async actions, is right up my alley. I'm ready to handle the layout updates, protect against edge cases like rapid clicks, and make sure the frontend test suite runs completely green. I can easily deliver this before the 96-hour deadline. Please let me know if I can take this on

ℹ️ Repo Maintainers: To accept this application, review their application or assign @iamTissan to this issue.

[drips-wave]

Congratulations, @iamTissan! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 2, 2026.

🧑‍💻 @iamTissan: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊