Skeleton-to-content reveal

Make it fit your project.

Reserve the final content dimensions in the loading skeleton. On actual data resolution, crossfade the placeholder and content over 160ms while retaining the same box. Mark the region aria-busy during loading and provide retry content on failure.

Build and check.

1. Confirm the supplied content, target environment, and required assets before implementing.
2. Reserve the final content dimensions in the loading skeleton. On actual data resolution, crossfade the placeholder and content over 160ms while retaining the same box. Mark the region aria-busy during loading and provide retry content on failure.
3. Implement idle, active, keyboard, touch, reduced-motion, and failure states as relevant.
4. Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.

Know the limits.

• A skeleton must stop when loading fails. Avoid indefinite shimmer or artificial delays.
• The prompt guides a coding agent; output quality depends on its implementation and review.

Want us to build it?

Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.