Skeleton

Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.

The data for your components might not be immediately available. You can increase the perceived performance for users by using skeletons. It feels like things are happening immediately, then the information is incrementally displayed on the screen (Cf. Avoid The Spinner).

The component is designed to be used directly in your components. For instance:

{item ? (
  <img style={{ width: 210, height: 118 }} alt={item.title} src={item.src} />
) : (
  <Skeleton variant="rect" width={210} height={118} />
)}

Variants

The component supports 3 shape variants.

<Skeleton variant="text" />
<Skeleton variant="circle" width={40} height={40} />
<Skeleton variant="rect" width={210} height={118} />

Animations

By default, the skeleton pulsate, but you can change the animation for a wave or disable it entirely.

<Skeleton />
<Skeleton animation={false} />
<Skeleton animation="wave" />

YouTube example

Don Diablo @ Tomorrowland Main Stage 2019 | Official…

Don Diablo396 k views • a week ago

Queen - Greatest Hits

Queen Official40 M views • 3 years ago

Calvin Harris, Sam Smith - Promises (Official Video)

Calvin Harris130 M views • 10 months ago

Facebook example

Ted5 hours ago

Why First Minister of Scotland Nicola Sturgeon thinks GDP is the wrong measure of a country's success:

API

<Skeleton />