Fig. 08 / Skeleton Screen · In motion
Mobile UI Patterns
Skeleton Screen
EXPLAINED SIMPLY:A skeleton screen is the set of gray placeholder shapes an app shows in the exact layout of the real content while it loads.
A skeleton screen is the set of gray placeholder shapes an app shows in the exact layout of the real content while it loads. The gray circle is where the avatar will be, the gray bars are where the text will go, and the screen fills in right where the shapes promised.
Facebook made the pattern famous and LinkedIn made it unavoidable, and now nearly every feed does it. Watch one load: gray blocks with a sheen sweeping across them, then the photo, the headline, and the comments settle in exactly where the blocks were. That moving sheen is called the shimmer, and its whole job is to say "still working" without resorting to a spinner.
A spinner says wait. A skeleton screen says almost, and shows you the shape of what's coming. Nothing actually loads faster, but the wait feels shorter, because your eyes get a head start on the layout. Designers call that perceived performance, and it's the entire reason the pattern exists.
The one rule is honesty. The shapes have to match what actually loads, in size and in position. If the real content lands somewhere the gray boxes didn't predict, the page jumps, and the skeleton becomes a small lie.
Don't confuse it with an empty state. A skeleton means content is coming, hold on. An empty state means there is no content, and here's what to do about that. An app that shimmers forever over nothing has confused the two.
You'll also hear skeleton loader, skeleton UI, ghost loading, or content placeholder, and some people just call the whole thing the shimmer. When a screen needs a moment to load and you want that moment to feel deliberate instead of broken, ask for a skeleton screen.