Respect prefers-reduced-motion for spinner, pulse, and toast animations

[mikewheeleer]

Honour prefers-reduced-motion across the app's animations

Description

The app uses animate-spin in src/components/Spinner.tsx, animate-pulse skeletons in src/app/loading.tsx, and animated toasts in src/components/ToastProvider.tsx, but nothing in src/app/globals.css or the Tailwind config respects the user's prefers-reduced-motion setting. Users who request reduced motion still get spinning/pulsing animation, a WCAG 2.3.3 concern. This issue makes motion opt-out-aware.

Requirements and context

• Repository scope: StableRoute-Org/Stableroute-frontend only.
• Add a @media (prefers-reduced-motion: reduce) rule in src/app/globals.css that disables or substantially reduces animations/transitions (e.g. animation: none/very short duration) globally.
• Verify the spinner remains a meaningful loading indicator (its role="status"/sr-only label stays) even with motion reduced.
• Keep all existing visuals for users who have not requested reduced motion; this is base-layer CSS only.
• Document the behaviour and how to test it (OS reduced-motion setting / emulation in devtools).

Suggested execution

• Fork the repo and create a branch
• git checkout -b a11y/motion-28-reduced-motion
• Implement changes
  • Write code in: src/app/globals.css.
  • Write comprehensive tests in: n/a for CSS — add a smoke test that the affected components still render with their role/labels, and document manual reduced-motion verification.
  • Add documentation: note the reduced-motion support in README.md.
  • Add CSS comments explaining the media query.
  • Validate the spinner's status semantics remain intact.
• Test and commit

Test and commit

• Run npm run lint, npm test, and npm run build, then emulate reduced motion in devtools via npm run dev.
• Cover edge cases: reduced-motion on (animations off), reduced-motion off (unchanged), and spinner still announces.
• Include before/after notes in the PR description.

Example commit message

a11y: respect prefers-reduced-motion for app animations

Guidelines

• Minimum 95 percent test coverage for impacted modules.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the StableRoute community on Discord for questions, reviews, and faster merges: https://discord.gg/37aCpusvx
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[Jokay1997]

I would love to take on this issue. I’ve reviewed the event ingestion logic. I have an experience with Rust, Soroban smart contracts, frontend programming languages and other programming languages

[grantfox-oss]

🦊 GrantFox — @Jokay1997 has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #74)
2. Your PR will be reviewed by the StableRoute-Org maintainers

Good luck! Track your progress on GrantFox.