An empty state means the system has finished and there is nothing to show. A loading state means the system is still fetching or preparing content. Keep them distinct: one tells people they can change a search or create something; the other tells them to wait.
What is the difference between an empty state and a loading state?
The distinction is whether the operation is complete. While data is pending, show a loading treatment. Once a request succeeds, show its outcome: matching content or an empty result. If the request fails, show an error instead.
As an Amazon Associate I earn from qualifying purchases.
The Intelligence Community Design System explicitly advises against using empty states to indicate loading. An empty state can describe a first-use screen with no items yet, or a completed search or filter with no matches. A loading state communicates that content has not arrived yet.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteWhat should users see during a search?
- Before submission: Show the ready interface, such as a search field and any existing content.
- While the request is active: Use a loading indicator or, when appropriate, a skeleton.
- When the request succeeds with matches: Display the results.
- When it succeeds with no matches: Show a contextual empty result that says the completed search found nothing and suggests a useful next step, such as changing the query or filters.
- When it fails: Explain that results could not be loaded and offer an applicable recovery action, such as retrying.
This sequence makes clear whether someone should wait, revise the request, or recover from a problem. An inability to load is an error, not proof that the user has no data, as the Australian Government Agriculture Design System and SAP Fiori guidance emphasize.
#1 Best Overall
When should you use a skeleton?
A skeleton is a low-fidelity placeholder for interface elements during loading. Use one when the eventual content layout is known and the wait is long enough for a placeholder to help. Match the skeleton’s shape and dimensions to the final content so the layout remains stable.
Do not use skeletons for very brief waits, or show them after a request has completed with no content. The Singapore Government Design System warns that skeletons in empty states can mislead people into expecting content that is on its way.
Make a long wait understandable
For a prolonged load, provide status text or a related control outside the skeleton. A skeleton should not be the only indication of status: users need to be able to tell that work is still in progress.
What makes an empty state useful?
Say what is absent in the context of the feature, then provide a next step if one would help. For a first-use list, explain that no items have been added and offer a way to create one. For a search, say that the completed query returned no matches and suggest adjusting the search or filters. SAP Fiori recommends explaining why an empty state appears and what the user can do next; the Intelligence Community Design System covers both first-use and no-results situations.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How to choose the right feedback
| Situation | What it means | Useful interface response |
|---|---|---|
| Request is still in progress | The outcome is not yet known. | Show a loading indicator; use a skeleton when the layout is predictable and the wait warrants one. |
| Request succeeded and content exists | There is content to display. | Show the content. |
| Request succeeded with no content | The operation completed, but there is nothing to display. | Explain the empty result and offer a relevant next step. |
| Request failed | The system could not determine or retrieve the result. | Explain the problem and provide an appropriate recovery action. |
These states are not interchangeable visual styles for the same moment. Choose based on whether data is pending or the operation has completed, whether a skeleton can accurately preview the layout, whether the wait merits a placeholder, what action the user can take, and whether status is clear to assistive technology. The Supabase Design System also distinguishes initial and zero-result empty states and their transition after loading.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
