Skip to content

Skeleton

Skeleton is used to build a skeleton frame of progressively loaded content.

Figma logo
  • Skeleton is used to emulate a low-fi page layout while data is loaded in the background
    • Simple is better: use the minimal number of elements to outline the structure
    • This technique improves perceived load times by presenting UI sooner
    • A “shimmering” background gradient animation suggests movement
  • Consider Spinner if you need a simple loading state
  • Skeleton is effectively a Box component with an animated background gradient
  • The basic idea is to create a rough skeleton of the page using a series of abstract shapes
    • This allows the user to familiarize themselves with the layout and reduces the jarring effect of a total layout shift that one would experience with something like Spinner
  • Skeleton is a generic div
    • Use properties like height, width, margin, border-radius, etc. to emulate the document structure
    • Use Grid to establish a structured layout that doesn't rely on margin
  • Don’t spend time adding too much detail
    • Layouts shift and content changes, so it isn’t worthwhile to create pixel-perfect facsimile
    • The document will almost certainly need to reflow no matter how hard you try, but it is more performant and less jarring for the user if it happens all at once
  • Apply aria-busy to the outermost container to indicate the loading state to screen readers

Skeletons can be built using any valid prop from Box.

Skeleton inherits these basic props from Box. In practice, there is very little practical use for them, but they are available if necessary.

React props
NameTypeDefaultDescription
children  ReactNodeThe content of the Skeleton
component  ElementdivAlternative component used to render
  • The aria-busy prop should be used on the outermost container to indicate the loading state to screen readers