Loading
Loading lets the user know the system is working on something. This could mean it's fetching data, checking submissions, navigating, or generating results.
Inline
Use case
- Local actions (affects this element only)
- Avoids blocking the whole UI
Do's
- Show immediately (right after the action)
Don'ts
- Do not combine local actions with Skeleton or Spinner
Summary
Stay right here, I'm working on just this part.
Skeleton
Use case
- Medium to major action was triggered
- Affects bigger content blocks
- Short to medium loading times
- Reducing perceived waiting time
Do's
- Show immediately (right after the action)
- Preserve layout to prevent layout jumps
- Enables predictability
- Reduces cognitive load
Don'ts
- Do not use it when expected loading is long or can't be predicted
Summary
Turning waiting into anticipation. Users can see the shape of what's coming.
Spinner
25%
Use case
- Major action was triggered
- Longer loading times (or you can not estimate)
Do's
- Show immediately (right after the action)
- Show expected time or progress when possible
- You may add meaningful messages for loading states, e.g.: "Loading database"
- Provide a cancel option for longer running tasks
- Pair with overlay (e.g. "Popup")
Don'ts
- Do not overuse it
- Do not use it for small actions
- Do not remove the context while loading
- Keep animations to a minimum
- May frustrate during long waits
- Do not fake progress
Summary
Good loading not only shows activity, but also restores confidence.