Skeleton

@/components/ui/Skeleton

Plassholder for innhold under lasting — gray-alpha-200 med skimmer, radius-sm, `aria-hidden`.

Når brukes den

Inne i en komponent som venter på data den selv henter (ikke en hel side — det er `loading.tsx`/`AreaSkeleton` sin jobb).
`rounded` for en avatar-/ikonplassholder (sirkel/pille) i stedet for standard radius-sm.
`Skeleton.Text` for avsnittstekst under lasting — siste linje er kortere, som ekte tekst.
Ikke bruk til en tom-tilstand (ingen data finnes) — det er `EmptyState` sin jobb. Skeleton betyr «kommer snart», ikke «finnes ikke».

width/height

Fast størrelse for én verdi — et tall, en dato, et navn.

<Skeleton width={120} height={16} />

rounded

Full radius — for en avatar- eller ikonplassholder.

<Skeleton width={40} height={40} rounded />

Skeleton.Text

Avsnittstekst under lasting — siste linje er kortere.

<Skeleton.Text lines={3} />

Sammensatt: rad med avatar + tekst

Skeleton er et primitiv — sett den sammen som en rad, kort eller liste selv, akkurat som ekte innhold.

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

width

number | string

—

Fast bredde, f.eks. 120 eller "60%".

height

number | string

Fast høyde.

rounded

boolean

false

Full (pille/sirkel) radius i stedet for standard radius-sm.

Skeleton.Text

{ lines?: number }

—

Egen eksport. `lines` (default 3) — siste linje er 70% bredde.