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
Response from the system
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.
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.
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.