# Loading skeleton
> Loading wrapper that shows shimmering pixel bars over its content and dissolves them as the content fades in when loading ends.
- React: `import { PxSkeleton } from "@/components/lumesec/px-skeleton"`
- Collection: Pixel UI (https://elements.lumesec.ai/components/pixel-ui)
- Registry item: https://elements.lumesec.ai/r/px-skeleton.json
- Page: https://elements.lumesec.ai/components/pixel-ui/skeleton



Live preview: https://elements.lumesec.ai/view/px-skeleton

Demo source:

```tsx
"use client";

import * as React from "react";

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

const controlButton =
  "h-[30px] rounded-lg border border-border bg-card px-[11px] font-[inherit] text-[12.5px] font-medium text-foreground hover:border-[color-mix(in_srgb,var(--lumesec)_50%,var(--border))]";

export default function PxSkeletonDemo() {
  const [loading, setLoading] = React.useState(true);
  const timer = React.useRef(0);

  React.useEffect(() => {
    timer.current = window.setTimeout(() => setLoading(false), 1400);
    return () => window.clearTimeout(timer.current);
  }, []);

  const reload = () => {
    setLoading(true);
    window.clearTimeout(timer.current);
    timer.current = window.setTimeout(() => setLoading(false), 1600);
  };

  return (
    <div className="w-full max-w-[400px] rounded-[14px] border border-border bg-card px-5 py-[18px] shadow-[0_14px_34px_-20px_rgb(0_0_0/0.4)]">
      <div className="grid gap-[14px]">
        <PxSkeleton loading={loading} avatar lines={3}>
          <div className="flex items-start gap-4">
            <PxAvatar name="Ada Lovelace" status="online" />
            <div>
              <b>Ada Lovelace</b>
              <div className="mt-1 text-[13px] text-muted-foreground">
                Shared “Notes on the Analytical Engine” in Research. 3 comments, 12 reactions.
              </div>
            </div>
          </div>
        </PxSkeleton>
        <div className="flex flex-wrap justify-center gap-1.5">
          <button type="button" className={controlButton} onClick={reload}>
            Reload
          </button>
        </div>
      </div>
    </div>
  );
}
```

## Playground

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

## Installation

```bash
npx shadcn@latest add @lumesec/px-skeleton
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx 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

React:

```tsx
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.

| Prop       | Type              | Default | Description                                                                                                     |
| ---------- | ----------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
| `loading`  | `boolean`         | `false` | While true the content is transparent and the skeleton shimmers over it; turning it off dissolves the skeleton. |
| `lines`    | `number`          | `3`     | Number of text bars.                                                                                            |
| `avatar`   | `boolean`         | `false` | Adds a 40 px circle on the left and shifts the bars to its right.                                               |
| `children` | `React.ReactNode` | —       | The real content. It keeps its size while loading, and the skeleton is drawn over that box.                     |

### 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](/docs/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.