Respect prefers-reduced-motion for spinners and skeleton animations

[mikewheeleer]

Improve motion handling to respect prefers-reduced-motion

Description

Several surfaces animate unconditionally: the spinning SVG in src/components/Spinner.tsx (animate-spin), the pulsing skeletons in src/app/loading.tsx (animate-pulse), and the copied-state transitions. Users who set prefers-reduced-motion: reduce should not see continuous motion (WCAG 2.3.3 / vestibular safety). This issue adds a reduced-motion fallback globally.

Requirements and context

• Repository scope: Agentpay-Org/Agentpay-frontend only.
• Add a @media (prefers-reduced-motion: reduce) block in src/app/globals.css that disables or slows animate-spin/animate-pulse (e.g. set animation: none and provide a static indicator).
• Ensure the spinner still conveys "loading" without motion (the existing role="status" + sr-only label already helps — verify it remains).
• Do not break dark mode or the existing Tailwind v4 @theme setup.

Suggested execution

• Fork the repo and create a branch
• git checkout -b a11y/a11y-23-reduced-motion
• Implement changes
  • Write code in: src/app/globals.css (and a static fallback in src/components/Spinner.tsx if needed).
  • Write comprehensive tests in: add/extend src/components/__tests__/Spinner.test.tsx to assert the accessible role="status"/label remains; document CSS-media behaviour in the PR.
  • Add documentation: note the reduced-motion support in README.md.
  • Validate with the browser's reduced-motion emulation.
• Test and commit

Test and commit

• Run npm run lint, npm run typecheck, npm test, and npm run build.
• Cover edge cases: reduced-motion on/off, dark mode, and the loading skeleton.
• Include the npm test output and a screenshot/note from reduced-motion emulation.

Example commit message

fix(a11y): honor prefers-reduced-motion for spinner and skeleton animations

Guidelines

• Minimum 95 percent test coverage for the changed component.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the AgentPay community on Discord for questions, reviews, and faster merges: https://discord.gg/eXvRKkgcv
• ⭐ 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.