Empty & Loading States
Every application has moments where content isn’t ready — data is loading, a list is empty, or a request failed. These patterns ensure users always know what’s happening and what to do next.
Loading States
Full-Page Spinner
Use when the entire page is loading:
Inline Spinner
Use within a specific section while the rest of the page is interactive:
The spinner requires a parent with position: relative and defined dimensions for inline mode.
Loading Button
Show a loading state on a button after the user clicks it:
The button becomes disabled and shows a spinner animation while loading="true".
Progress Bar
Use when the loading duration is known or estimable:
Empty States
Empty Data Table
When a table has no data:
Empty List / No Content
When a section has no items yet:
First-Time Experience
When a user lands on a feature for the first time:
Error States
Inline Error
Show within the content area when a specific request fails:
Full-Page Error
When the entire page fails to load:
Network Error with Toast
For background failures that don’t block the page:
Decision Guide
| Situation | Pattern | Component |
|---|---|---|
| Page is loading | Full-page spinner | eds-spinner with fullscreen |
| Section is loading | Inline spinner | eds-spinner in a container |
| Action in progress | Loading button | eds-button with loading |
| Known progress | Progress bar | eds-progress-bar |
| No data to show | Empty state with CTA | Icon + text + eds-button |
| First-time user | Welcome state | Heading + description + CTAs |
| Request failed | Inline error | eds-alert with intent="error" |
| Page failed to load | Full-page error | Centered error + retry button |
| Background failure | Toast notification | eds-toast with intent="warning" |
Best Practices
- Always show something — never leave a blank page. Even a spinner tells the user something is happening.
- Provide a next step — empty states should have a CTA. Error states should have a retry button.
- Use spinners for unknown duration, progress bars for known duration.
- Don’t block the whole page if only one section is loading — use inline spinners.
- Keep error messages actionable — “Failed to load” is useless; “Failed to load. Retry?” is helpful.
- Use toasts for recoverable errors (network retries), alerts for errors that need user action.