Loading States

Work In Progress

This page is a work in progress, accuracy of the content is not guaranteed and is subject to change at any time.

Loading states reassure the user that an operation is in progress. To this end, various components can be used.

Spinners

Use a spinner when loading content or data. It should be centered within the content body and appear instantaneously after the action is triggered.

note

The alternative-text attribute should be populated to communicate the operation to screen readers e.g. Uploading data.

caution

To prevent excessive flickering, do not render a spinner when it would only appear for under 500 milliseconds.

Stencils

Where only a section of the content is loading, such as a list or table, use a stencil to show a grey outline for a loading area.

Use stencils when data takes longer than 300 milliseconds to retrieve.

• For less than 300 milliseconds, just show the data
• For over 300 milliseconds, promptly fade the stencil in and when the data is ready, cross-fade to the data

For table lists, avoid filling the screen up with stencils. Render a table data row stencil 20 times and reduce the opacity of each row by 5% to create a fade effect from 100% to 0% opacity, giving an infinite data effect.

Error handling

If loading fails due to a network fault or validation error, smoothly transition from the loading state to the error state.

• If the fault was due to network issues, allow the user to retry the operation by providing a retry function
• When inside a modal, keep the modal open to maintain context

On loading complete

Ensure content appears instantaneously but without abrupt transitions.

• Have the spinner/stencils disappear smoothly to avoid flickering
• When inside a modal, keep the modal open if further user action is required
  • If not required, provide brief confirmation feedback e.g. Saving complete before closing the modal

caution

Do not allow a "white flash" to appear when switching between a stencil and data.