📌 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
🔒 Security notes
No new attack surface; purely an accessibility accommodation.
📋 Guidelines
- Minimum 95% test coverage
- Clear documentation
- Timeframe: 96 hours
📌 Description
TableSkeleton(src/components/TableSkeleton.tsx) applies Tailwind'sanimate-pulseunconditionally to its placeholder rows, shown whileAnchorsPanel,SettlementsPanel, andPoolsPanelload data. Users withprefers-reduced-motion: reduceset at the OS level currently get the full pulsing animation with no accommodation.🧩 Requirements and context
prefers-reduced-motion: reduceis set.motion-reduce:variant or an equivalent rule inglobals.css) over JS media-query polling.🛠️ Suggested execution
src/components/TableSkeleton.tsxto add amotion-reduce:animate-none(or equivalent) modifier alongsideanimate-pulse.src/app/globals.cssif a shared utility is more appropriate than per-component classes.src/components/TableSkeleton.test.tsxto assert the reduced-motion class is present.✅ Acceptance criteria
prefers-reduced-motion: reduceis set.🔒 Security notes
No new attack surface; purely an accessibility accommodation.
📋 Guidelines