Skeletons improve the perception of certain pages taking some time to fully load by providing visual feedback. Their low-fidelity aspect will give the impression that the interface is pre-loading for a few seconds.
The Skeleton may also indicate the future presence of an element (for example, a chart that will appear when some information has been entered).
Best practices
- Use a skeleton to display data-based and container-based elements (cards, charts, data tables...) requiring more time to load.
- Add an explanatory message when a skeleton is used while waiting for an action to be completed.
- The page title must be loaded directly to indicate that elements are loading.
- Always animate all the loading skeletons at the same time on a page, to avoid the appearance of a domino effect.
- Do not use a skeleton for a basic element who will load instantly (a button, a link, etc.) individually.
- Do not use a skeleton for elements that are also used for loading (spinners, etc.) or for instant elements (notifications, banners, toasts, etc.)
Style
The skeleton is composed of gray blocks simulating the presence of an element in low fidelity. You can use the skeletons provided in the UI Kit. You can also play around with the warm grey discrete shades (from 20 to 50) to create the component needed with grey blocks. Don’t forget to use the 8px grid system and 3px radius blocks.
Layout
Skeletons should be placed in the exact location like the element they are replacing.
The skeleton may appear by itself, or accompanied by a notification field.
When using it to pre-load, its appearance should not exceed three seconds. They will fade in and fade out, or use a subtle reflecting animation.
Code & Design assets
Request code and design assets for creating user interfaces.
Can I contribute to the System?
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.