animation glossary
Skeleton Loading
A skeleton loading state shows gray placeholder shapes shaped like the content — text lines, avatars, cards — while the real data loads.
What is Skeleton Loading?
Skeleton screens are the loading pattern users see on every modern app: instead of a spinner, the UI shows faint gray blocks that mirror the final layout, so the page feels fast and the shift to real content is small. The craft is in the transition — placeholders that shimmer, pulse, or resolve line-by-line into real content. This page shows the skeleton-reveal shot from the library, which stages a draft sketch into a skeleton list and then into finished content.
Skeleton Loading in Remotion
Every shot below is a real, renderable Remotion composition. Open the detail page for the recipe notes, then copy the agent brief to implement the shot from tuned TSX.
Implement skeleton loading
Copy the agent brief for the first shot to have an AI agent build it from the reference TSX.
Frequently asked questions
What is a skeleton loading screen?+
A skeleton loading screen shows gray placeholder blocks shaped like the eventual content — title lines, avatars, images — while data loads, instead of a plain spinner. It reduces perceived load time and layout shift.
How do you animate a skeleton loader?+
Render neutral placeholder bars, then add a shimmer sweep or pulse. The best skeletons also resolve into real content progressively, so the transition from placeholder to data reads as one continuous motion.
Why use skeleton loading instead of a spinner?+
Skeletons show the page structure immediately, so users see progress and the final layout does not jump. Spinners hide that context and make waits feel longer.