Back to Designs page

Table of Contents

Related Research

No research entries have been linked to this design.

Resources

No resources available for this entry.

Additional tags

No tags are assigned to this entry.

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:

  1. Page load or search filter checks for data
  2. Displays skeleton while making the request
  3. Shows data or empty state or zero filtered results

The user will see a flash of the skeleton based on API and network speed.