Skeleton Screen

Create skeleton loading screens. While data loads, show a skeleton that mirrors the final layout: same card sizes, same text line positions, as light gray rounded blocks (radius matching the real elements). Add a shimmer: an overlay gradient (transparent, then a soft white at ~55% opacity, then transparent) that sweeps across each block via transform: translateX from -100% to 100%, 1.4s linear, repeating. When the data arrives, crossfade from skeleton to real content over 240ms; never let the layout shift between the two. Use a skeleton instead of a spinner everywhere a list, card grid, or page body loads. If prefers-reduced-motion is enabled, show the skeleton without the shimmer animation. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.