Skeleton state of a table
Overview
Loading strategies assure users that their request is in progress and can create the illusion of shorter load times in apps. According to research conducted by the Nielsen Norman Group, skeleton states and other loading indicators improve user satisfaction.
In this pattern, we will look at skeleton states☠️, loading indicators, and progressive loading.
Skeleton States ☠️
Skeleton states are simplified versions of components used on an initial page load to indicate that the information on the page has not fully loaded yet. They should only appear for only a few seconds, disappearing once components and content populate the page.
Skeleton states use motion to convey that the page is not stuck and data is still being loaded. This can help to reduce user uncertainty.
Never represent overlay components such as notifications, overflow menus, dropdown items, modals, and loaders with skeleton states. Elements inside a modal may have a skeleton state, but the modal should not.
Loading Indicators
Loading indicators signal a user action is processing. Unlike progress bars, loading indicators only signal that loading is occurring and do not indicate progress.
Full-screen loading indicators tell a user the entire application is processing, while inline indicators show that a specific selection or action is processing.
Full-Screen Loading
Loading UI component
The loading component should be used when the entire page is processing. This is often applied after data is submitted or saved by the user.
When to use:
- An action temporarily disables the application. If a user’s action temporarily disables the application while processing occurs, use a loading indicator and a full-screen overlay.
- Processing takes more than a few seconds. If a loading process will require the application’s full resources and will take longer than a moment or two, use a full-screen loading indicator.
- Data from user input is being saved or submitted. Saving data following user input often takes a few moments. Using a loading indicator allows the application to finish processing before allowing the user to continue.
Inline Loading
Use the loading component inline when a single component is processing. For example, when a user clicks copy button, a loading component used inline in the button (replacing the button text) indicates the system is processing the copy request.
Progressive Loading
Progressive loading is a technique that loads pages in batches. The simplest view of the page loads first, followed by progressively more detailed batches until the entire viewport has loaded.
The primary batch should show a page’s basic structure (the skeleton state versions of the container-based components), data-based text (the skeleton state version of the text), and non-data text. Following batches can include images, content outside the viewport, interactive (action-based) components, and data-based text.
Not all items need a skeleton state and instead can be expressed as negative or white space until they load. For example, a 600 x 600px image can be shown as a 600 x 600px area of white space until the full image loads.
"Show more" Options 👀
A "Show more" option can extend a list where only a small fraction of options are displayed. It can also be used in cases where the list of options is populated via a database. Using "Show more" allows the data to load in progressive batches. See the "Show more" pattern for more details.
Accessibility
A screen reader should notify a user if an application is loading, busy, gets stuck, or if a process fails.
For specific loading accessibility concerns, see the WCAG documentation for Notification of Loading/Busy and adhere to accessibility guidelines for the loading component.