Skeleton
Skeletons are used to provide a low fidelity representation of content before it appears in a view. This improves the perceived loading time for our users.
<section aria-label="Loading subjects list">
<sl-skeleton effect="shimmer"></sl-skeleton>
<sl-skeleton effect="shimmer"></sl-skeleton>
<sl-skeleton effect="shimmer"></sl-skeleton>
</section>When to use
Loading states
Use skeletons to represent content while data is being fetched. For instance, display a skeleton list before actual items load.
Page transitions
During page transitions or navigation, show skeletons to indicate that content is loading. This maintains user engagement.
Image loading
When images take time to load, display image placeholders using skeletons. Users perceive faster loading times.
When not to use
Misleading expectations
Don’t use skeletons if they might mislead users. For instance, showing a skeleton for a feature that won’t load can frustrate users.