Stop 06 · Interaction Design & Micro-interactionsTopics · 6/9

Loading States & Skeleton Screens

In short

A blank screen for two seconds feels broken. The same two seconds with grey outlines of the coming content feels quick. Skeleton screens don't make apps faster, they make waiting feel shorter.

Showing a placeholder representation of content while it loads (a skeleton screen) rather than a blank screen or spinner — reduces perceived wait time and feels more polished.

The jaadu sits in front of a steel thali with empty bowls while a server brings food.

Think of it like this

The thali laid out before the food

At a wedding, they first place the steel thali and the empty katoris in front of you. You already know where the dal, sabzi and sweet will go. When food arrives, nothing is surprising. A skeleton screen sets the plate before the food.

Watch it happen

Choosing the right loading pattern

Under 1s

1 to 3s

Page load

10s plus

1/4Very short waits: often no loader at all. A flashing spinner for a split second looks glitchy.

The big ideas

What you need to know

Match the real layout

Skeleton blocks should sit where the real image, title and text will appear, so nothing jumps around later.

Gentle shimmer

A soft moving shine tells people it's still loading. Keep it subtle and slow.

Load in pieces

Show text first and images when ready. People can start reading before everything arrives.

Plan the timeout

If loading never finishes, swap the skeleton for an error state with a retry button.

Save yourself the pain

Common mistakes

Oops

Drawing a skeleton that looks nothing like the final layout.

Do this instead

Copy the real layout's shapes and spacing. Otherwise the page jumps when content loads.

Oops

Using a full-screen spinner that blocks everything for every request.

Do this instead

Load only the part that's waiting and keep the rest of the screen usable.

Your mission

Build a skeleton in Figma

~25 min

Quick check

Why do skeleton screens often feel faster than a spinner, even with the same load time?

Go deeper

1Design a skeleton screen version of a content-heavy layout you've built.
2Compare the perceived experience of a blank loading screen versus a skeleton screen.
3Learn when a simple spinner is sufficient versus when a skeleton screen adds real value.