Skeleton states are simplified versions of components used on an initial page load to indicate that the information on the page has not fully loaded yet.
Skeleton loading elements appear to be faster and are more user friendly, but they should be used with considerations for design, context, and broader user experience.
Use a Skeleton whenever the wait time is anticipated to be longer than three seconds.
Import
import { Skeleton } from "@fuegokit/react";
Accessibility
Skeletons should work across browsers with current releases of JAWS, NVDA, VoiceOver, and TalkBack.
Likewise, Skeleton animations are only shown to users who have not set a prefers-reduced-motion preference.
Asynchronously loading content should have aria-busy=true applied.
Consider your audience when choosing whether to use a Skeleton or a Spinner component to communicate loading states, and weigh these considerations within the context of your use case:
- For lower vision users, skeletons present challenges since their contrast is low.
- For sufficiently large animations, users with vestibular disorders can find the animations problematic.
- For screen reader users, the loading state is consistently not properly conveyed, and when it is the live region sometimes announces it after the content has already loaded (or fails to update when it has not).
Usage
Only use a Skeleton with container-based components like cards, tiles and structured lists or data-based components like data tables.
In most cases, action components such as buttons and input fields do not need to have a skeleton state.
When an entire page is processing, use a Loading component.
Elements inside a modal can have a skeleton state, but the modal itself should not.
<MyCard><Skeleton width={96}/>{/* content */}</MyCard>Do
Use skeleton states on container-based components like tiles and structured lists or data-based components like data tables and cards
<Skeleton width={84}><Button/></Skeleton>Don't
Don't use skeletons with toast notifications, overflow menus, dropdown items, modals, and loaders with skeleton states.