Skeleton

Exiba uma visualização do espaço reservado de seu conteúdo antes que os dados sejam carregados, reduzindo a sensação de lentidão do tempo de carregamento.

Os dados dos seus componentes podem não estar imediatamente disponíveis. Você pode aumentar o desempenho percebido pelos usuários usando esqueletos. Ele passa a sensação de que as coisas estão acontecendo imediatamente, então a informação é mostrada incrementalmente na tela (Cf. Evite uso de progressos).

O componente é projetado para ser usado diretamente em seus componentes. Por exemplo:

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

Variantes

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 />