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 melhorar a capacidade de resposta percebida da página usando skeletons. 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).

Uso

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 4 shape variants:

text (default): represents a single line of text (you can adjust the height via font size).
circular, rectangular, and rounded: come with different border radius to let you take control of the size.

{/* For variant="text", adjust the height via font-size */}
<Skeleton variant="text" sx={{ fontSize: '1rem' }} />

{/* For other variants, adjust the size with `width` and `height` */}
<Skeleton variant="circular" width={40} height={40} />
<Skeleton variant="rectangular" width={210} height={60} />
<Skeleton variant="rounded" width={210} height={60} />

Animações

Por padrão, o skeleton pulsa, mas você pode mudar a animação para uma onda ou desativá-la completamente.

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

Exemplo com efeito de pulsação

Don Diablo @ Tomorrowland Main Stage 2019 | Official…

Don Diablo396k views • a week ago

Queen - Greatest Hits

Queen Official40M views • 3 years ago

Calvin Harris, Sam Smith - Promises (Official Video)

Calvin Harris130M views • 10 months ago

Exemplo com efeito de ondas

Ted5 hours ago

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

Inferindo dimensões

Além de aceitar as propriedades width e height, o componente também pode inferir as dimensões.

Ele funciona bem quando se trata de tipografia, pois sua altura é definida usando a unidade em.

<Typography variant="h1">{loading ? <Skeleton /> : 'h1'}</Typography>

body1

caption

Mas quando se trata de outros componentes, você pode não querer repetir a largura e a altura. Nessas situações, você pode passar componentes como children, e ele vai inferir a sua largura e a altura a partir deles.

loading ? (
  <Skeleton>
    <Avatar />
  </Skeleton>
) : (
  <Avatar src={data.avatar} />
);

Ted

Cor

The color of the component can be customized by changing its background-color CSS property. This is especially useful when on a black background (as the skeleton will otherwise be invisible).

<Skeleton
  sx={{ bgcolor: 'grey.900' }}
  variant="rectangular"
  width={210}
  height={118}
/>

Acessibilidade

Telas com skeleton fornecem uma alternativa aos métodos tradicionais de feedback. Em vez de mostrar um resumo abstrato na tela, telas com skeleton criam uma expectativa do que está por vir, reduzindo a sensação cognitiva do processo de carregamento.

A cor de fundo do skeleton usa uma quantidade menor de luminância para ser visível em boas condições (boa luz ambiente, boa tela, sem deficiência visual).

ARIA

Nenhum.

Teclado

O skeleton não é focável.

API

<Skeleton />