Skeleton screen
A placeholder UI of gray shapes shown while real content loads.
Sarah Chen
Designing for clarity over cleverness
A short note on resisting the temptation to over-engineer interface surface area when the job is to help people get something done.
Skeleton screens replace blank space or spinners during loading by mirroring the rough shape of the content that will appear. Done well, they reduce perceived wait time and prevent layout shift when content arrives. The term was coined by Luke Wroblewski in a 2013 blog post on perceived performance.
Also called
content placeholderghost UI
When to use
- Loading states where the final layout is known
- First paint while data is being fetched
- Anywhere a spinner would feel slower or more anxious
When not to use
- Very short loads (under ~300ms) where the flash is more annoying than helpful
- Loading content of unknown shape or length
Related
Source
Coined by Luke Wroblewski, 2013.