AppSkeleton

Átomos

Indicador de carregamento em forma de barra ou forma arredondada, no lugar de texto ou mídia ainda não disponíveis.

Quando usar: no lugar de conteúdo (texto, título, imagem) enquanto ele carrega; ponha aria-busy="true" no contêiner que está carregando para avisar tecnologias assistivas.

Quando não usar: para indicar o progresso de uma ação já iniciada pela pessoa (use AppSpinner ou AppProgress).

Importar

import { AppSkeleton } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppSkeleton.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppSkeleton.css';

Exemplos

Default

const Default = () => <AppSkeleton variant="text" />;

Variantes

const Variantes = () => (
  <div style={{ display: 'grid', gap: 16, width: 240 }}>
    <AppSkeleton variant="title" />
    <AppSkeleton variant="text" lines={3} />
    <AppSkeleton variant="rect" height={96} />
    <AppSkeleton variant="circle" />
  </div>
);

Tom De Marca

const TomDeMarca = () => (
  <div style={{ display: 'grid', gap: 12, width: 240, padding: 16, background: 'var(--color-action-primary)', borderRadius: 16 }}>
    <AppSkeleton variant="title" tone="brand" />
    <AppSkeleton variant="text" lines={2} tone="brand" />
  </div>
);

Sem Animacao

const SemAnimacao = () => <AppSkeleton variant="text" lines={2} animated={false} />;

Props

Prop	Tipo	Padrão	Descrição
`animated`	`boolean`	`true`	Liga a animação de brilho. Desligada automaticamente com `prefers-reduced-motion: reduce`. Padrão: `true`.
`height`	`string \| number`	`—`	Altura: número em px ou string CSS.
`lines`	`number`	`1`	Número de linhas (só se aplica a `variant="text"`). A última linha fica com 60% de largura. Padrão: `1`.
`tone`	`"neutral" \| "brand"`	`neutral`	Tom neutro (padrão) ou tom suave da marca, para usar sobre superfícies de marca. Padrão: `'neutral'`.
`variant`	`"title" \| "text" \| "rect" \| "circle"`	`text`	Forma da barra: texto, título, retângulo livre ou círculo. Padrão: `'text'`.
`width`	`string \| number`	`—`	Largura: número em px ou string CSS.