Add animation to SkeletonField component#2184
Conversation
|
There was a problem hiding this comment.
Pull request overview
Adds a shimmer animation to the SkeletonField loading placeholder to provide a more dynamic skeleton UI, and updates Storybook/Chromatic settings to stabilize snapshots.
Changes:
- Added
shimmerkeyframes +animate-shimmeranimation to the shared Tailwind config. - Updated
SkeletonFieldto render a gradient shimmer style whenshowis true. - Adjusted the
SkeletonFieldStorybook story to pause animations for Chromatic.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/ui-components/tailwind.base.config.cjs | Introduces shimmer keyframes and shimmer animation utility for Tailwind. |
| packages/ui-components/src/components/skeleton/skeleton-field.tsx | Switches the skeleton placeholder styling to use the new shimmer animation + gradient background sizing. |
| packages/ui-components/src/stories/skeleton/skeleton-field.stories.tsx | Sets Chromatic to pause animations to reduce visual regression flakiness. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| className={cn( | ||
| 'w-full h-full rounded-xl', | ||
| 'bg-gradient-to-r from-muted to-border', | ||
| 'animate-shimmer bg-gradient-to-l from-muted via-border to-muted bg-[length:200%_100%]', |
There was a problem hiding this comment.
SkeletonField now always uses an infinite shimmer animation when show is true. This doesn’t respect users who have prefers-reduced-motion enabled. Consider gating the animation behind Tailwind’s motion-safe: variant (or disabling it with motion-reduce:animate-none) so the skeleton renders as a static gradient for reduced-motion users.
| 'animate-shimmer bg-gradient-to-l from-muted via-border to-muted bg-[length:200%_100%]', | |
| 'motion-safe:animate-shimmer motion-reduce:animate-none bg-gradient-to-l from-muted via-border to-muted bg-[length:200%_100%]', |
There was a problem hiding this comment.
we never add it, don't think it's relevant
Fixes OPS-4043