Pular para o conteúdo
Faculdade PhorteDesign System

Esqueleto

Em andamento

O lugar de um conteúdo que ainda está chegando: a forma do cartão, da linha de texto, da foto, para a página não pular quando o conteúdo entra. Cada forma é decorativa; o EsqueletoGrupo em volta diz "Carregando" uma vez.

Função
Estado e aviso
Também chamado de
skeleton, esqueleto, placeholder de carregamento, carregando, shimmer
Mora em
app/components/atoms/Esqueleto.tsx
Última mudança
2026-09-29
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Cartão
  3. Sem animação
  4. Na troca

Quando usar

Quando o conteúdo leva mais de um instante para chegar e já se sabe a forma dele: a lista de cursos, o cartão da turma, o perfil de um docente.

Faça

  • Para os cartões que vêm de API, use os esqueletos prontos (E157): CourseCardEsqueleto, BlogCardEsqueleto, EventCardEsqueleto e TurmaCardEsqueleto, que têm a forma exata do cartão.
  • Envolva os esqueletos de um bloco num EsqueletoGrupo com um rotulo que diga o quê ("Carregando cursos").
  • Imite a forma do conteúdo: miniatura, título e duas linhas para um cartão; avatar e linha para uma pessoa.
  • Troque o grupo inteiro pelo conteúdo quando ele chegar: o anúncio sai junto.
  • Em lista muito longa, animado={false}: dezenas de formas pulsando cansam.

Evite

  • Dar esqueleto a peça que aparece na hora — botão, campo, aviso, modal, menu, rodapé: ela já está pronta, e o esqueleto só atrasaria a leitura. Esqueleto é para conteúdo que chega depois e tem forma previsível (revisão 4).
  • Um "Carregando" por forma: o leitor de tela repetiria a mesma palavra a cada linha.
  • Esqueleto que fica na tela para sempre: se a carga falhar, troque pelo Alert.
  • Forma muito diferente do conteúdo: o salto que ele evitaria volta.

Quando não usar. Para uma ação que a pessoa disparou (enviar, salvar): o Button com carregamento. Para uma tarefa com progresso conhecido: o Progress. Quando não se sabe a forma do que vem: o Progress indeterminado.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Forma — Um bloco em `--border`: texto (14px), título (24px, 60% da largura), avatar (40px, redondo), miniatura (16:9) e botão (44px de altura, raio do controle).
  2. Pulso — A opacidade vai de 1 a 0,5 e volta, em 1,6s — sem deslocamento. Parado com movimento reduzido.
  3. Grupo — Uma região `status` com o `rotulo` só para o leitor de tela.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
PulsandoO padrão, com movimento liberado.
ParadoCom animado={false} ou com movimento reduzido no sistema.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
O conteúdo chegaQuem chama troca o grupo pelo conteúdo; o status some junto — testado na ficha.
Movimento reduzidoA animação é none: a forma fica parada, e o "Carregando" do grupo continua.

Relacionados