Skeleton

Um placeholder animado exibido enquanto o conteúdo carrega.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add skeleton --yes

O item skeleton do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/skeleton_component.rb
app/helpers/ui/skeleton_helper.rb
vendor/shadwire/shadwire.css

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

Dimensione cada placeholder com classes utilitárias. O skeleton é decorativo por padrão (aria-hidden="true"); anuncie o carregamento em outro elemento (por exemplo, uma região com aria-busy).

<%= ui_skeleton(class: "h-4 w-48") %>

Ou renderize o componente Ui::SkeletonComponent diretamente:

<%= render Ui::SkeletonComponent.new(class: "size-10 rounded-full") %>

Exemplos

Padrão

Combine formas para esboçar o conteúdo que está carregando.

<div class="flex items-center gap-4">
  <%= ui_skeleton(class: "size-10 rounded-full") %>
  <div class="grid gap-2">
    <%= ui_skeleton(class: "h-4 w-36") %>
    <%= ui_skeleton(class: "h-4 w-24") %>
  </div>
</div>

Card

Um placeholder para cards de mídia com linhas de texto.

<div class="flex flex-col gap-3">
  <%= ui_skeleton(class: "h-32 w-64 rounded-xl") %>
  <div class="grid gap-2">
    <%= ui_skeleton(class: "h-4 w-56") %>
    <%= ui_skeleton(class: "h-4 w-40") %>
  </div>
</div>

Referência da API

ui_skeleton(**options, &block) encapsula Ui::SkeletonComponent.new(**options).

Argumento	Tipo	Padrão	Descrição
`class` / `class_name`	String	`nil`	Dimensões e forma do placeholder (`h-4 w-48`, `rounded-full`, …).
`**attrs`	Hash	`{}`	Atributos HTML livres. `aria: { hidden: "false" }` expõe o elemento a leitores de tela.