Padrões

Skeleton

Placeholder animado para estados de carregamento. Substitui o spinner em telas com estrutura conhecida, reduzindo a percepção de espera.

Anatomia

Feed

Skeleton circular

rounded-full. Usado em avatars. Border-radius espelha o do elemento real — nunca use rounded para avatar.

Skeleton de texto

Altura fixa (h-2.5 a h-3.5). Widths variadas (40–75%) para evitar aparência de bloco uniforme. Sempre rounded.

Skeleton de imagem

aspect-square ou altura fixa. rounded-xl espelha a capa. O shimmer (::after) percorre todos em 1.4s — nunca altere a duração.

Token base

Classe .skeleton

position: relative
overflow: hidden
background: #1a1a1a

::after — shimmer

background: linear-gradient(90deg,
  transparent 0%,
  rgba(255,255,255,0.04) 50%,
  transparent 100%)
animation: shimmer 1.4s ease-in-out infinite

@keyframes shimmer

0%   { translateX(-100%) }
100% { translateX(100%) }

Regra

Nunca use cor diferente de #1a1a1a.
Border-radius espelha o do elemento real.

Coleção (ColecaoSkeleton)

Saudação + hero card + grid 3 colunas.

Código

{'<'}ColecaoSkeleton {'/>'}

skeleton h-3 w-32 rounded mb-2
skeleton h-7 w-24 rounded mb-4
skeleton rounded-2xl h-[104px] mb-6
grid grid-cols-3 gap-px
  skeleton aspect-square (×9)

Listas (ListasSkeleton)

Grid 2 colunas com capa quadrada + título + artista.

Código

{'<'}ListasSkeleton {'/>'}

px-4 grid grid-cols-2 gap-3 mt-1
  skeleton rounded-xl aspect-square
  skeleton h-3 w-4/5 rounded mt-2
  skeleton h-2.5 w-3/5 rounded mt-1.5
(×8 itens)

Feed (FeedSkeleton)

Avatar + nome + imagem full-width + ações e legenda.

Código

{'<'}FeedSkeleton count={3} {'/>'}

border-b border-[#1a1a1a]
  skeleton w-9 h-9 rounded-full
  skeleton h-3 w-28 rounded
  skeleton h-2.5 w-20 rounded
skeleton aspect-square w-full
  skeleton h-6 w-6 rounded-full (×2)
  skeleton h-3 w-40 rounded
  skeleton h-2.5 w-24 rounded

List Item

Linha de lista com capa à direita. Usado em GeneroDiscos e DiscoDetalhe relacionados.

Código inline

flex items-center gap-3 px-4 py-3
  flex-1 space-y-2
    skeleton h-3.5 rounded w-2/3
    skeleton h-3 rounded w-1/2
    skeleton h-2.5 rounded w-2/5
  skeleton w-12 h-12 rounded-lg

Regras

Quando usar skeleton vs spinner

Skeleton → estrutura da tela é conhecida
Spinner  → conteúdo imprevisível ou ação pontual

Border-radius

Espelha o elemento real.
texto → rounded (6px)
capa  → rounded-lg (8px) ou rounded-xl (12px)
avatar → rounded-full

Larguras dos textos

Variar entre w-1/2, w-3/5, w-4/5
para evitar aparência de bloco uniforme.

Duração

1.4s ease-in-out infinite
Não alterar — garante consistência perceptiva.