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.

Animações

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

Exemplo com efeito de pulsação

Exemplo com efeito de ondas

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>

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} />
);

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).

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

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <Skeleton />