Empty State vs. Skeleton
An empty state means there is no content. A skeleton means the content is still loading and its shape is known.
Use an empty state to explain why nothing is there and what to do next. Use a skeleton for a short load when you know the layout.
See what each pattern does
Try each example. Then read about the job it is made to do.
Empty, Error & Success State — Learning Bundle
This learning bundle covers three different app states. Empty means there is no content yet. Error means something failed. Success confirms completion. Each needs its own message and next step. The bundle is not one standard state term.
Save a guide to keep the patterns your team uses most within reach.
A new project list explains how to create the first item. If the network fails, Retry appears and the filters stay saved.
- Use it when
- Use this guide as a checklist. Design each state for every view that depends on data.
- Do not use it when
- Never leave a blank screen or dead end. Explain failures and confirm success.
- Name used in code
status state machine
Skeleton
A skeleton is a simple placeholder shaped like the content that's still loading.
A profile page saves room for its photo and text. The layout stays still when data arrives.
- Use it when
- Use it when the layout is known and the wait is easy to notice.
- Do not use it when
- Never invent fake details, shimmer forever, or use a skeleton when content appears almost at once.
- Name used in code
aria-busy="true"
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| Empty, Error & Success State — Learning Bundle | Use this guide as a checklist. Design each state for every view that depends on data. | Never leave a blank screen or dead end. Explain failures and confirm success. | status state machine |
| Skeleton | Use it when the layout is known and the wait is easy to notice. | Never invent fake details, shimmer forever, or use a skeleton when content appears almost at once. | aria-busy="true" |
Before you ship
- 01
Write down what the person needs to do.
- 02
Test the keyboard, focus, touch, zoom, loading, empty, and error states.
- 03
Make sure people can get the same information without hover or motion.
- 04
Test with real content on both small and large screens.
Comparison request you can copy
Copy this when your team needs help choosing between the patterns.
Choose the best pattern from Empty, Error & Success State — Learning Bundle, Skeleton for our real user flow. Use this rule: An empty state means there is no content. A skeleton means the content is still loading and its shape is known. Write down the task, amount of content, and cost of stopping the flow. Check keyboard, touch, loading, error, and reduced-motion behavior. Explain your choice, then build the smallest accessible version with the project's design system.