Skeleton

A pulsing placeholder bone for loading surfaces. Size and shape come from className — the component only supplies the wash and motion. Decorative by default; mark the surrounding region with aria-busy / aria-label. Prefer Spinner (or a control’s built-in loading) when a single action is pending, and a composed skeleton when the eventual layout is already known.

Import

import { Skeleton } from "@photon-ai/pho-ui/components/skeleton";

Basic

<Skeleton className="h-4 w-40" />
<Skeleton className="h-4 w-64" />

Shapes

Compose circles, pills, and bars to match the loaded UI.

<Skeleton className="size-10 rounded-full" />
<Skeleton className="h-3.5 w-32" />
<Skeleton className="h-8 w-16 rounded-base" />

Guidelines

• Size every bone explicitly (h-* / w-* / size-*) — there is no default footprint.
• Put aria-busy on the loading region, not on each bone.
• For content pages, keep titles and field labels real — skeletonize only server-owned values (see Basic Page).