Use loading patterns when data takes an extended time to process and appear on the user's screen, in order to demonstrate that the screen is not frozen. There are two visual indicators to show that data is loading: skeleton states and the loading component.


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.

Skeleton loading

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.

Full-screen loading

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.

Inline loading


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.

Load more button

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.

Infinite scroll