Skeleton

Feedback Visual

Placeholder animado para indicar carregamento de conteúdo.

Preview

Visualização do componente Skeleton em diferentes formas e tamanhos

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add skeleton

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Uso Básico

Exemplo básico

import { Skeleton } from "@scmposs/hollow-ui"

// Skeleton simples
<Skeleton className="h-4 w-full" />

// Skeleton circular (avatar)
<Skeleton className="h-12 w-12 rounded-full" />

// Skeleton com dimensões customizadas
<Skeleton className="h-32 w-64" />

Exemplos

Diferentes casos de uso do componente Skeleton

Carregamento de Texto

<div className="space-y-2">
  <Skeleton className="h-6 w-3/4" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-5/6" />
  <Skeleton className="h-4 w-4/6" />
</div>

Card de Perfil

<div className="flex items-center gap-4">
  <Skeleton className="h-16 w-16 rounded-full" />
  <div className="space-y-2 flex-1">
    <Skeleton className="h-5 w-1/3" />
    <Skeleton className="h-4 w-1/2" />
    <Skeleton className="h-3 w-2/3" />
  </div>
</div>

Lista de Itens

{items.map((item) => (
  <div key={item.id} className="flex items-center gap-3">
    <Skeleton className="h-10 w-10 rounded" />
    <div className="space-y-2 flex-1">
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-3 w-3/4" />
    </div>
  </div>
))}

Card Completo

<div className="border rounded-lg overflow-hidden">
  <Skeleton className="h-48 w-full" />
  <div className="p-4 space-y-3">
    <Skeleton className="h-6 w-3/4" />
    <Skeleton className="h-4 w-full" />
    <Skeleton className="h-4 w-5/6" />
    <div className="flex gap-2 pt-2">
      <Skeleton className="h-8 w-20" />
      <Skeleton className="h-8 w-20" />
    </div>
  </div>
</div>

Demonstração Interativa

Este card alterna entre skeleton e conteúdo real a cada 3 segundos

const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  // Simula carregamento de dados
  fetchData().then(() => setIsLoading(false));
}, []);

return (
  <div>
    {isLoading ? (
      <div className="space-y-3">
        <Skeleton className="h-8 w-2/3" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-5/6" />
      </div>
    ) : (
      <div className="space-y-3">
        <h3>{data.title}</h3>
        <p>{data.description}</p>
      </div>
    )}
  </div>
);

Propriedades

Props disponíveis para o componente Skeleton

Prop	Tipo	Padrão	Descrição
className	string	-	Classes CSS customizadas para estilização

Nota: O componente Skeleton aceita todas as props padrão de um elemento div. Use a prop className para definir dimensões, bordas arredondadas e outros estilos.

Diretrizes de Uso

✅ Quando usar

Durante o carregamento inicial de dados de uma API
Em lazy loading de componentes ou seções
Para melhorar a percepção de performance da aplicação
Quando o layout final é conhecido antecipadamente

❌ Quando evitar

Para carregamentos muito rápidos (<300ms)
Em operações que não alteram o layout da página
Quando um spinner simples seria mais apropriado
Para conteúdo que muda constantemente

💡 Dicas

Combine múltiplos skeletons para replicar o layout final
Use tamanhos proporcionais ao conteúdo real
Mantenha a consistência com rounded corners do design
Considere usar diferentes larguras para parecer mais natural

Acessibilidade

O componente Skeleton é puramente visual e não requer atributos ARIA específicos. No entanto, é importante:

Usar aria-live="polite" no container quando o conteúdo real for carregado
Considerar adicionar aria-busy="true" durante o carregamento
Garantir que leitores de tela anunciem quando o conteúdo real estiver disponível
Evitar usar skeleton por tempo excessivo (idealmente <5s)