Skip to content

Loading states


These components are employed to manage user expectations:

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


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.

Spin as user interface feedback

Spin should solely be employed when users interact with clickable interface elements on the page.

Usage rules


Use it for:

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


Use it while:

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


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


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.

Released under the MIT License.

Released under the MIT License.