FundamentosServer Component

Skeleton

El bloque gris que late mientras carga algo.

import { Skeleton } from "sebs7n-ui/skeleton"

Ejemplos

Del tamaño de lo que viene

Un skeleton que no coincide con el contenido final produce un salto peor que un spinner.

import { Card, CardContent, CardHeader } from "sebs7n-ui/card"
import { Skeleton } from "sebs7n-ui/skeleton"

function Basico() {
  return (
    <Card className="w-full max-w-sm" aria-busy="true">
      <CardHeader>
        <Skeleton className="h-5 w-32 rounded-md" />
        <Skeleton className="h-4 w-48 rounded-md" />
      </CardHeader>
      <CardContent className="flex flex-col gap-2">
        <Skeleton className="h-4 w-full rounded-md" />
        <Skeleton className="h-4 w-full rounded-md" />
        <Skeleton className="h-4 w-2/3 rounded-md" />
      </CardContent>
    </Card>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Skeleton

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

Teclado

—: No es interactivo.

Accesibilidad

La animación pasa por motion-reduce, además del reset global del paquete.
La región que se está cargando debería tener aria-busy="true"; el skeleton solo es el relleno visual.

Reglas de uso

Del tamaño de lo que viene. Un skeleton que no coincide con el contenido final produce un salto peor que un spinner.
Para una carga de menos de ~300 ms, nada: el parpadeo molesta más que la espera.

Relacionados

Card Table