Skip to content

Respect prefers-reduced-motion in TableSkeleton's pulse animation #125

Description

@Jagadeeshftw

📌 Description

TableSkeleton (src/components/TableSkeleton.tsx) applies Tailwind's animate-pulse unconditionally to its placeholder rows, shown while AnchorsPanel, SettlementsPanel, and PoolsPanel load data. Users with prefers-reduced-motion: reduce set at the OS level currently get the full pulsing animation with no accommodation.

🧩 Requirements and context

  • Disable or substantially reduce the pulse animation when prefers-reduced-motion: reduce is set.
  • Preserve the skeleton's static bar layout (columns/rows) as a non-animated fallback.
  • Prefer a CSS-only solution (a Tailwind motion-reduce: variant or an equivalent rule in globals.css) over JS media-query polling.

🛠️ Suggested execution

  • Update src/components/TableSkeleton.tsx to add a motion-reduce:animate-none (or equivalent) modifier alongside animate-pulse.
  • Add a rule to src/app/globals.css if a shared utility is more appropriate than per-component classes.
  • Extend src/components/TableSkeleton.test.tsx to assert the reduced-motion class is present.

✅ Acceptance criteria

  • TableSkeleton no longer animates when prefers-reduced-motion: reduce is set.
  • The static skeleton layout still renders correctly in both modes.
  • Test coverage for the reduced-motion class.

🔒 Security notes

No new attack surface; purely an accessibility accommodation.

📋 Guidelines

  • Minimum 95% test coverage
  • Clear documentation
  • Timeframe: 96 hours

Metadata

Metadata

Assignees

Labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions