Loading skeleton

Playground#

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

<PxSkeleton loading avatar lines={3}>Shared “Notes on the Analytical Engine” in Research. 3 comments, 12 reactions.</PxSkeleton>

Installation#

pnpm dlx shadcn@latest add @lumesec/px-skeleton

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

npx shadcn@latest add https://elements.lumesec.ai/r/px-skeleton.json

Usage#

import { PxSkeleton } from "@/components/lumesec/px-skeleton";

export function Example({ loading }: { loading: boolean }) {
  return (
    <PxSkeleton loading={loading} lines={3}>
      <p>Shared “Notes on the Analytical Engine” in Research. 3 comments, 12 reactions.</p>
    </PxSkeleton>
  );
}

Behaviour#

Wraps real content and shows shimmering pixel bars in its shape while loading. Turning loading off dissolves the skeleton as the content fades in.

API reference#

Props#

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

Ref#

ref points at the root HTMLDivElement.

Accessibility#

• The root is an aria-live="polite" region with aria-busy reflecting loading.
• While loading, the content is transparent and inert: it keeps its place in the layout but cannot be clicked, focused or read until loading ends.
• The skeleton canvas is aria-hidden.
• Reduced motion: the shimmer wave stops; the dissolve and the content fade still run.

Theming#

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground and --lumesec.

Notes#

• The bars follow a fixed pattern of widths (100%, 90%, 62%, 80%, 50%) and are not traced from the content. Their spacing is computed from at most the first 120 px of height.
• The skeleton fills the content's box, so the content needs its real height while loading.
• The root carries data-loading while loading.