Waiting state

Under ReviewUpdated May 12, 2026

Description

Use the waiting state to give users feedback about a process that's started or content that's loading. Use it to communicate progress with the user, and reduce anxiety. There are 2 main waiting states:

Processing

Includes creating, editing, deleting, saving, copying, sending, and uploading data.
The processing label should correspond to the trigger label.
For example, when a user selects a button labeled Save, the waiting state should be labeled Saving...

Loading

Displays content on a page.
This can be new content on an empty page, updated content in existing components, or new content in new components alongside existing components.
The loading label should almost always be Loading...

Behavior

Processing and loading can happen sequentially or independently of each other. Here are some examples.

Processing followed by loading: A user applies filters to a table. The filter process starts and then the filtered data is loaded and displayed.
Processing only: A user selects Create copy on a form page and the create process starts. The new page is displayed immediately.
Loading only: A user selects a tab in a page, and the tab content begins to load.

Warning

Do not make the user wait longer than necessary. If the processing or loading times are less than 1 second, do not display a progress indicator before displaying the target screen.

Figma library

Processing to loading

Choosing the right progress indicator

Progress indicator	Components that have a processing state
Loader: spinner	ButtonSwitchFile input
Loader: bar	Page (a page-level element that will appear below the global navigation once the full page is loading.)
Loader: stars	Copilot content

When choosing which progress indicator to use in your design, consider the following:

Progress indicator characteristics
Processing time and user journey
Loading time, predictability of content, and user interaction

Warning

From a development perspective, it can be tempting to use looped-animation progress indicators for all types of delays, including long ones, because it doesn’t require estimating the duration of the action. However, we don’t recommend looped animation without any "loading message" for actions that take longer than 10 seconds, because users quickly grow impatient if they feel like they aren’t making progress.

Untracked loader

Waiting time: 1-3 seconds, or unpredictable
Animation: Looped
Components to use: Skeleton, Loader (untracked)
Display for: 1-3 seconds
Guidance: If the untracked loader must be displayed for more than 3 seconds, the user may begin to think something has gone wrong. To avoid this, update the progress indicator label to explain the situation and, if possible, include an estimated waiting time.

Ring

Bar

Skeleton

Stars

Tracked loader

Waiting time: Predictable
Animation: Tracked time animates over total time
Component to use: Loader (tracked), Progress tracker
Display for: 3-10 seconds ideally, but longer if necessary
Guidance: Use meaningful labels to keep the user informed of progress

Ring

Bar

Processing

Labels

Use a meaningful label to help the user understand that processing is ongoing.
The label should correspond to the action that is in progress.
If necessary, tell them if they need to stay on the same screen or not.

Examples

Depending on the use case, you can completely or partially block user interaction with the UI while a process is completing.

Completely blocked

Partially blocked

What happens next

There are 3 possible outcomes when a process completes:

The process completes and a success message is displayed.
The process does not complete and an error message is displayed.
The process completes and will continue loading the content.

Loading

Examples

Start progressive loading whenever you can, so users can begin their task while loading continues.

Progressive loading

Skeleton and Ring

Skeleton and Bar

Combine with tracked bar

Best practices

Use a Ring instead of Skeleton if the loading content or layout is unpredictable.
Do not use an untracked loader without a clear explanation message when processing or loading takes more than 3 seconds. Users might think the system is unresponsive.
Do not use a mask to prevent users from interacting with the page when it is only partially loaded. Users may wish to continue with other tasks.

Resources

Date	Change
October 2024	Updated Dos and don'ts image.
September 2024	Copied information from Product design system.

Loading use case	Loading time	Progress indicator	Benefit
1. Most of the content is new.For example, launching an app, opening a new page, or opening a new sidebar.	🤔1 to 3 seconds.	Untracked loader "Ring".	More simple than a skeleton to code.
	😪3 to 10 seconds.	Tracked loader "Bar" if time is predictable.Skeleton components if content is predictable.Untracked loader "Ring" if content is unpredictable.
	😴☕ More than 10 seconds.	Tracked loader "Bar" with component and skeleton content.
2. Additional data is loaded for first time.For example, most of the content is there already, but there are new elements such as a set of cards or a new table.	🤔1 to 3 seconds.	Untracked loader "Ring".
	😪3 to 10 seconds.	Skeleton.
3. Updating content in an existing component.For example, new data in a table, new status for items in a list, or extra content in a card.		Skeleton.	Keeps the visibility of existing content.Draws user attention to newly loaded data.