Description

These components are employed to manage user expectations:

• SpinContainer / Spin
• Skeleton
• ProgressBar

Use them for different cases. For detailed insights into each component, refer to their guides.

TIP

Ensure that the container housing the loading message has margins. This prevents the container from becoming tightly attached to other elements on the page during cases like viewport size adjustments. The margin values are usually multiples of 4 (for example, for the spinner, we recommend using margin: 40px).

Response from the system

Lazy loading

When you possess insight into the loading time of a page, apply the "Lazy Loading" principle to load the page.

For instance, if you know that a landing page loads quickly, you can progressively load elements without displaying either the spinner or the skeleton. Essential functionality, such as input fields and submit buttons, appear first, followed by illustrations and marketing content.

Page loading

In all other circumstances, implement Skeleton to display while the page loads.

A delay of 600ms should be incorporated before the skeleton becomes visible across all products. This delay mitigates flickering during transitions between products.

Usage rules

Skeleton

Use it for:

• Initial data loading.
• Displaying the structure of loading pages and data.
• Loading new data.

SpinContainer

Use it while:

• Filtering substantial data within widgets/tables/pages.
• Sorting significant data within widgets/tables/pages.
• Conducting data searches.

TIP

If the loading process is rapid, this state can be omitted.

Spin

You can use Spin instead of SpinContainer when you need to show a loading state of a single element, such as a table cell.

ProgressBar

Use it for scenarios where data collection extends beyond 5 seconds. This duration may differ across various widgets. For instance, within tables, if data collection takes longer than 1 minute.