Visão geral

O Skeleton reproduz a forma do conteúdo que está carregando, reduzindo o layout shift e melhorando a percepção de performance.

Card de perfil

Linha de lista

Card de conteúdo

Tabela

Import

import { Skeleton } from "@/components/ui/skeleton"

Padrão de implementação

Como substituir conteúdo por Skeleton durante o carregamento.

Skeleton condicional

function UserCard({ user, isLoading }) {
  if (isLoading) {
    return (
      <div className="ds-card !p-[30px] flex items-center gap-4">
        <Skeleton className="size-12 rounded-full" />
        <div className="flex flex-col gap-2 flex-1">
          <Skeleton className="h-4 w-32" />
          <Skeleton className="h-3 w-24" />
        </div>
      </div>
    )
  }

  return (
    <div className="ds-card !p-[30px] flex items-center gap-4">
      <Avatar>...</Avatar>
      <div>{user.name}</div>
    </div>
  )
}

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter