Guidelines
When to use
- Loading data: Use the Skeleton component to visually indicate loading states when fetching data from a server or performing other asynchronous operations.
- Improving user experience: Implement Skeletons to keep users engaged and reduce the perception of loading time by showing content placeholders instead of blank spaces.
Use the Sekeleton when fetching Data from a server.
Use a Spinner for simple content of for saving actions.
When not to use
- Static content: Avoid using the Skeleton components for static content that does not require loading or asynchronous data fetching.
- Simple interfaces: With simple interfaces or minimal loading times, Skeletons may not add significant value and could be unnecessary. Use the Spinner instead.
- Performance overhead: Consider the performance impact, as implementing Skeletons adds additional rendering tasks; avoid using them if the overhead outweighs the benefits.
Avoid using Skeleton components for static content.
Use the Skeleton for dynamic content, and display static content as is.
Content
Skeletons are a form of loading state, so while the screen is loading, when possible, maintain the static content that has already loaded.