Skeleton

Placeholder visual para conteúdo em carregamento. Preserva o layout final e evita salto de conteúdo.

O mk-skeleton substitui conteúdo ainda não carregado por um placeholder animado que preserva o espaço final. Evita salto de layout e sinaliza carregamento sem usar um spinner.

Formas

Cada shape corresponde ao raio de borda do elemento que substitui.

import { MkSkeleton } from '@db1/makuco-ui-react';

<MkSkeleton shape="text" size="body-md" width="80%" />
<MkSkeleton shape="rect" width="120px" height="40px" />
<MkSkeleton shape="circle" width="40px" />

<mk-skeleton shape="text" size="body-md" width="80%"></mk-skeleton>
<mk-skeleton shape="rect" width="120px" height="40px"></mk-skeleton>
<mk-skeleton shape="circle" width="40px"></mk-skeleton>

Múltiplas linhas

Use lines para gerar um parágrafo de placeholders. A última linha encurta para ~65% simulando texto real.

<MkSkeleton lines={4} width="100%" />

<mk-skeleton lines="4" width="100%"></mk-skeleton>

Escala tipográfica

Para shape="text", use size para alinhar a altura do placeholder ao line-height do texto que ele substitui.

<MkSkeleton shape="text" size="heading" width="70%" />
<MkSkeleton shape="text" size="body-md" width="90%" />
<MkSkeleton shape="text" size="body-sm" width="80%" />

<mk-skeleton shape="text" size="heading" width="70%"></mk-skeleton>
<mk-skeleton shape="text" size="body-md" width="90%"></mk-skeleton>

Composição de layout

Combine múltiplos mk-skeleton para replicar a estrutura de um card ou listagem antes de os dados chegarem.

<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
  <MkSkeleton shape="circle" width="40px" />
  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '8px' }}>
    <MkSkeleton shape="text" size="body-md" width="60%" />
    <MkSkeleton shape="text" size="body-sm" width="40%" />
  </div>
</div>

<div style="display: flex; gap: 12px; align-items: center;">
  <mk-skeleton shape="circle" width="40px"></mk-skeleton>
  <div style="flex: 1; display: flex; flex-direction: column; gap: 8px;">
    <mk-skeleton shape="text" size="body-md" width="60%"></mk-skeleton>
    <mk-skeleton shape="text" size="body-sm" width="40%"></mk-skeleton>
  </div>
</div>

Props

Prop	Tipo	Padrão	Descrição
`shape`	`"text" \| "line" \| "rect" \| "card" \| "chip" \| "circle"`	`"text"`	Forma do placeholder. Define o border-radius aplicado.
`size`	`"body-sm" \| "body-md" \| "body-lg" \| "title-sm" \| "title-md" \| "heading" \| "display"`	`"body-md"`	Escala tipográfica usada para calcular a altura. Aplicada somente quando `shape="text"`.
`width`	`string`	—	Largura CSS (`120px`, `60%`, `8rem`). Obrigatório para formas não-textuais.
`height`	`string`	—	Altura CSS. Ignorado para formas de texto (a prop `size` determina a altura).
`lines`	`number`	—	Renderiza N linhas de texto. A última encurta para ~65%. Ignora o slot quando definido.

Acessibilidade

role="status", aria-busy="true" e aria-live="polite" aplicados automaticamente.
O label acessível é localizado — em pt-BR é "Carregando…".