Skip to content
UX Atlas
PatternMixed evidenceIntermediate

Skeleton Screens

Grey placeholders in the shape of the content that is coming, which reads as progress rather than as waiting.

Definition

A skeleton screen shows a simplified wireframe of the incoming layout while data loads. It sets expectations about structure and avoids the layout shift that occurs when content replaces a spinner.

Mixed evidence. Real research exists, but findings conflict, effect sizes are small, or the jump from the lab to interface design is contested.

On this page
  1. Definition
  2. Doing it properly
  3. In practice
  4. Continue from here

Doing it properly

  • Match the real layout in dimensions and position, or the shift on arrival defeats the purpose.
  • Keep the shimmer subtle, or remove it entirely under prefers-reduced-motion.
  • Do not skeleton for waits under about 300ms.
  • Mark the skeleton container aria-busy and hide the placeholder shapes from assistive technology.
  • Show a realistic number of placeholder items, not always exactly three.

In practice

Skeleton driven by the same layout code

Component libraries

Generating the skeleton from the same layout primitives as the content guarantees the shapes match and keeps them matching as the component changes.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.

Alternative approach

A different answer to the same problem, with a different cost.

  • Progress IndicatorComponent

    Skeletons suit unknown layouts arriving. Determinate progress suits known work.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.