How do you align loading, empty, error, and success states?
Explain the real situation while waiting, when content is absent, after failure, and on completion.
Interface states explain what is happening. Loading, empty content, errors, and success need different expressions rather than one blank area or a generic No data message.
Keep these basics in mind
- A loading state means reading or processing is underway. It does not establish failure or absence. See Cloudscape’s loading and refreshing guide .
- An empty state means reading succeeded but there are no items. A no-match state means conditions matched nothing. See Cloudscape’s empty-state guide .
- Errors explain what happened and a possible next step. Preserve input and context where possible.
- Success explains the actual result and, when helpful, an entry to view it. Essential feedback must also reach assistive tools rather than relying on visual change alone.
Switch states
Illustrative state comparison
This is a teaching example of a project list.
| Actual situation | Previous generic message | Appropriate meaning |
|---|---|---|
| Still reading | No projects | Loading projects |
| Read succeeded, none created | No projects | None yet; offer creation |
| Reading failed | No projects | Could not load; offer retry |
| Creation succeeded | No feedback | Created; offer viewing |
Walk through an example
A first visit to the project list shows loading, then explains that no projects exist and offers creation. If creation fails, it preserves possible input and explains the problem. Only a successful response produces Created and an entry to the new project.
Limits and common misunderstandings
A skeleton screen uses placeholder shapes to suggest upcoming content. It is not real data and cannot indefinitely replace error guidance. A stopped spinner does not establish success. Choose message duration for importance and usage; essential results should not disappear in a flash.