Overview
Loading states reassure the user that their request is processing.
According to research conducted by the Nielsen Norman Group, skeleton states and other loading indicators improve user satisfaction and may give the illusion of a shorter load time.
Skeleton states
A skeleton state is a more basic version of a component––one that lacks content, displaying only the "skeleton" of the component––that appears on an initial page load.
Skeleton loading uses motion to demonstrate that the page is not frozen. This serves to show the user that the actual content is still in the process of loading fully.
Skeleton screens should only be displayed for a few seconds, to become replaced by full components and real content as soon as possible.
When to use skeleton loading
- Use skeleton loading on container-based and data-based components like selects, structured lists, tables and cards. Action-based components like buttons, input fields, checkboxes or toggles don't usually require a skeleton state.
- Don't use skeleton states to represent snackbar notifications, overflow menus, dropdown items, modals, and loaders. Even when the elements inside a modal have a skeleton state, the modal itself should not.
Loading indicators
Loading indicators indicate to the user that an action is in progress. Distinct from progress bars, loading indicators only signal that loading is occurring but don't provide any indication of the level of progress.
- Full-screen loading indicators show that the entire application is in progress
- Inline indicators show that a specific selection or action is in progress.
Full-screen loading
Use full-screen loading when the entire page is processing. This is usually when the user's action loads or reloads the whole application.
If the wait time is going to be longer than a few minutes, add a notification to inform the user.
Inline loading
Use the inline loading component when a single component is processing. For example, when a user engages in a search, inline loading indicates the system is processing the action.
Load more
Use load more options to extend a list where only a fragment of options is visible. Load more can also be used when the list of options is provided by a database, since it allows the data to load in gradual portions.
Load more by button
Use a load more button in places where lists contain sub-lists or if there is a technical limitation, as in a dropdown menu. In such cases, avoid using infinite scroll to make sure that all sub-lists can be made visible.
Infinite scroll
Infinite scroll means turning content into a single stream and represents the user's natural browsing behavior.
Use the infinite scroll in cases where options can continue to appear smoothly as one unified list.
