Loading States
Design type: Loading state | Product area: Hybrid Cloud Console
Author: Kevin Hatchoua
Last edit: March 21, 2023
Spinner
Spinner (pf example)
A spinner is simply a turning ‘circle’ centered on a grey page without showing anything more. Unlike a skeleton, it does not show a simulation of the data before it is populated.
Skeleton
A skeleton shows an example of how the data might be populated before it gets populated.
Skeleton loading should be progressive - load static text first.
When to use which one
Show a spinner when:
- You do not know what the populated data may look like :
- e.g: if you are loading a form for example (they are not all structured the same)
- When it is likely it will fail or show an empty state
- While waiting for actions to complete
- e.g: when you press save on a modal → spinner in the modal before it’s ready to close
Show a skeleton when:
- You know what the populated data is going to look like (even if it results in an empty state)
- e.g: for the navigation on a page that is always the same
- Reasoning: in most cases, the data will not result in an empty state
- Loading inside a cell
A mixture of both:
- e.g: if you are filtering data in a table and don’t know if it will return a result
- Table pagination and toolbar with be a skeleton, but the body of the table will be a spinner
- For whole-page situations
- Skeleton out the overall structure and chrome
- Spinner for inner information that is still loading
- Once data is verified to come in, show the skeleton inside any cards/cells/etc that are still loading
Background info for how skeleton loading works:
Code executes in the following manner:
- Page load or search filter checks for data
- Displays skeleton while making the request
- Shows data or empty state or zero filtered results
The user will see a flash of the skeleton based on API and network speed.