💠 Skeleton
Use to show a placeholder while content is loading.
Usage
The Skeleton component is a visual indicator used as a placeholder for content as it loads, preventing a flash of empty space or a loading spinner. It’s typically used to maintain the layout's structure and provide a smooth visual cue that content is forthcoming.
Skeleton components often take the form of shapes resembling the content that will eventually be loaded, such as rectangular blocks for images or lines for text.
When to use
- Progressive loading: Use Skeletons to enhance the user experience during progressive content loading, especially when fetching data that might take time.
- Reducing perceived latency: Implement Skeletons to reduce the perceived latency of content loading and to keep users informed that the content is on its way.
- Placeholder for media content: Skeletons are useful as placeholders for images, videos, or text that take time to load, maintaining the layout's flow and preventing jarring shifts when content pops in.
- Complex layouts: They are particularly effective in complex layouts with multiple data points, like dashboards or detailed lists, where different elements might load at different times.
Avoid using Skeleton screens for content that loads quickly, as their presence might be more distracting than beneficial. Also, refrain from using Skeletons as a substitute for good performance optimization—while they improve the experience of loading, they should not replace efforts to make applications faster. Lastly, be cautious of over-animation or elaborate styling that might be more attention-grabbing than the content itself.
Examples
Circle
Line
With card
Useful links
Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: