Context
packages/loopover-ui-kit/src/components/skeleton.tsx's Skeleton component uses animate-pulse (line 4) with no motion-reduce:animate-none companion class. Every other animated primitive in this component library disables/reduces its animation under prefers-reduced-motion: state-views.tsx:23's Spinner (motion-reduce:animate-none), button.tsx:8, tabs.tsx:30. state-views.tsx's own doc comment (line 15) explicitly claims "All animations respect prefers-reduced-motion" for this loading-state family, and that same file's JSDoc (line 233) directs callers to Skeleton for content-shaped loading placeholders — making Skeleton the one component in that family that doesn't actually honor the claim.
Requirements
- Add
motion-reduce:animate-none to Skeleton's className, matching the exact convention already used by Spinner and other animated primitives in the kit.
- Do not change
Skeleton's base styling (rounded-md bg-primary/10) or its prop passthrough — this issue is scoped to the missing motion-reduce class only.
Deliverables
Test Coverage Requirements
packages/loopover-ui-kit — check coverage.include for this package; if covered, 99%+ Codecov patch coverage plus the regression test above.
Expected Outcome
state-views.tsx's "all animations respect prefers-reduced-motion" claim is actually true for every component in that loading-state family, including Skeleton.
Links & Resources
packages/loopover-ui-kit/src/components/state-views.tsx:15,23,233 — the claim and the Spinner precedent to mirror. packages/loopover-ui-kit/src/components/skeleton.tsx:4 — the component to fix.
Context
packages/loopover-ui-kit/src/components/skeleton.tsx'sSkeletoncomponent usesanimate-pulse(line 4) with nomotion-reduce:animate-nonecompanion class. Every other animated primitive in this component library disables/reduces its animation underprefers-reduced-motion:state-views.tsx:23'sSpinner(motion-reduce:animate-none),button.tsx:8,tabs.tsx:30.state-views.tsx's own doc comment (line 15) explicitly claims "All animations respect prefers-reduced-motion" for this loading-state family, and that same file's JSDoc (line 233) directs callers toSkeletonfor content-shaped loading placeholders — makingSkeletonthe one component in that family that doesn't actually honor the claim.Requirements
motion-reduce:animate-nonetoSkeleton's className, matching the exact convention already used bySpinnerand other animated primitives in the kit.Skeleton's base styling (rounded-md bg-primary/10) or its prop passthrough — this issue is scoped to the missing motion-reduce class only.Deliverables
Skeletonrespectsprefers-reduced-motionviamotion-reduce:animate-noneTest Coverage Requirements
packages/loopover-ui-kit— checkcoverage.includefor this package; if covered, 99%+ Codecov patch coverage plus the regression test above.Expected Outcome
state-views.tsx's "all animations respect prefers-reduced-motion" claim is actually true for every component in that loading-state family, includingSkeleton.Links & Resources
packages/loopover-ui-kit/src/components/state-views.tsx:15,23,233— the claim and theSpinnerprecedent to mirror.packages/loopover-ui-kit/src/components/skeleton.tsx:4— the component to fix.