Skeleton or progress
Use a skeleton for a known content layout. Use meaningful progress for a measurable operation.
Loading & feedback
Reserve space, explain progress, and make the next action clear.
Open a workspace that explains what is happening.
Use for records, dashboards and detail views that load asynchronously. Distinguish a request in progress from an empty result or an operation that failed.
- 01Reserve the expected space.
- 02Explain the current state.
- 03Offer the next useful action.
Design beyond the happy path.
Select a state to see what the interface should communicate. These are illustrative snapshots; try the live component below.
EXAMPLE WORKSPACELoading
Loading requests…
The request region is busy.
Wait for the resultDESIGN INTENT
Loading
Use shapes that resemble the expected content. Mark the region busy and keep loading placeholders out of the reading order.
Try the working example ↓EXAMPLE WORKSPACEReady
Your requests
3 requests loaded
- REQ-1042
- In review
- REQ-1043
- Assigned
- REQ-1044
- New
DESIGN INTENT
Ready
Replace the placeholders, clear the busy state and announce the result without moving focus unexpectedly.
Try the working example ↓EXAMPLE WORKSPACEEmpty
No requests yet
Loading finished. There are no requests to display.
Create a requestDESIGN INTENT
Empty
Explain the empty state and offer the first useful action. Avoid an indefinite skeleton when the result is simply empty.
Try the working example ↓EXAMPLE WORKSPACEFailed
Requests couldn’t be loaded
The service did not return a result. Your work is unchanged.
Try againDESIGN INTENT
Failed
Show an actionable error and retry. If refreshing existing data fails, consider keeping the last result visible with its age.
Try the working example ↓WORKING EXAMPLE
Component reference →Loading & feedback
Choose Show content to replace the skeleton with the loaded workspace. Choose Show skeleton to return to the loading state. The state reference above also shows empty and failed outcomes.
Make the important choices explicit.
Local or global feedback
Keep a field error near the field and a loading state near its region. Use a notification for a result that needs broader attention.
Repeated announcements
Announce meaningful state changes. Avoid announcing every placeholder or each animation cycle.
Keep the behavior. Bring your data.
The examples demonstrate interaction using sample data. Your application owns the real records, permissions and persistence.
- 01Request state
- Track loading, ready, empty and failed as distinct states.
- 02Stale responses
- Ignore an older response when a newer request has superseded it.
- 03Recovery
- Offer a retry that preserves the person’s filters and input.
BUILD THIS PATTERN WITH
All patterns →