Library / UI components / Skeleton screen
No. 012·noun·also called skeleton, placeholder, shimmer

Skeleton screen

Grey shapes that stand in for content while it loads, so the page has its final shape right away.

SPECIMEN · LIVE DEMO
Definition

What it is

A skeleton screen shows grey blocks where text, images, and buttons will appear, in the same layout as the real thing. When the data arrives, the content swaps in without anything jumping around.

Skeletons make waiting feel shorter than a spinner on a blank page because people can already see the shape of what's coming. They work best for loads that take more than a moment: feeds, dashboards, lists.

A skeleton is one kind of loading state. A spinner says "busy" without showing shape; a progress bar shows how far along a longer task is.

Say it like a builder

How to ask for it

Vague

“The page is blank for a second when it loads. Can you make it less weird?”

Precise

“While the dashboard data is loading, show a skeleton screen: grey placeholder blocks matching each card's final size and layout, with a subtle pulse. Swap in the real content without changing the layout.”

Why it works

"Less weird" gives no direction; "skeleton screen" names placeholder shapes and the prompt requires them to match the final layout.

In the wild

You've seen this in

  • YYouTube's home page as it loads
  • SLinkedIn's feed on a slow connection
  • FFacebook posts before they appear
Usage note

Often confused with

Loading stateLoading state is the general idea of showing that something is loading; a skeleton is one specific way to do it.Empty stateAn empty state means there's no data; a skeleton means data is on its way.