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).
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.
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.
Request code and design assets for creating user interfaces.
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.