Skeleton

Apresentação

O componente Skeleton é responsável por exibir um placeholder animado que simula o carregamento de conteúdo. Ele é ideal para melhorar a experiência do usuário durante o carregamento de dados, evitando mudanças bruscas no layout e fornecendo feedback visual do conteúdo que está sendo carregado.

Quando usar

• Durante o carregamento de conteúdo
• Para preencher espaços vazios temporariamente
• Em listas e grids que carregam dados
• Para simular o layout final do conteúdo
• Em cards e containers que carregam dados
• Para manter a consistência visual durante carregamentos
• Em perfis e avatares que carregam imagens
• Para indicar que o conteúdo está sendo carregado

Forma básica de uso

import { Skeleton, SkeletonLine, SkeletonCircle } from 'eitri-luminus';

// Skeleton básico
<Skeleton />

// Skeleton com tamanho personalizado
<Skeleton className="w-48 h-48" />

// Skeleton com conteúdo
<Skeleton>
  <div className="p-4">
    <h3>Conteúdo carregando...</h3>
  </div>
</Skeleton>

// SkeletonLine básico
<SkeletonLine />

// SkeletonLine com largura personalizada
<SkeletonLine className="w-64" />

// SkeletonLine com altura personalizada
<SkeletonLine className="h-6" />

// SkeletonCircle básico
<SkeletonCircle />

// SkeletonCircle com tamanho personalizado
<SkeletonCircle className="h-24 w-24" />

// Exemplo de uso combinado
<div className="flex items-center space-x-4">
  <SkeletonCircle />
  <div className="space-y-2">
    <SkeletonLine className="w-32" />
    <SkeletonLine className="w-24" />
  </div>
</div>

Propriedades

Skeleton

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais
id	string	Identificador único do componente

SkeletonLine

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais
id	string	Identificador único do componente

SkeletonCircle

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

Os componentes Skeleton, SkeletonLine e SkeletonCircle herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• Todos os componentes usam a classe 'skeleton' para a animação base
• O SkeletonLine é ideal para simular linhas de texto
• O SkeletonCircle é perfeito para simular avatares ou ícones circulares
• É possível personalizar a aparência usando classes do Tailwind
• Os componentes são responsivos por padrão
• Suportam diferentes tamanhos e formas
• Podem ser combinados para criar layouts complexos
• São ideais para melhorar a experiência de carregamento
• Mantêm a consistência visual durante o carregamento
• Podem ser usados em qualquer contexto que necessite de feedback visual de carregamento
• São especialmente úteis em aplicações que carregam dados dinamicamente