On this page

Data & status

Skeleton released

The shape of content that has not arrived, holding the room it is going to take.

Import@pacit/components/skeleton
Selectorpct-skeleton

No APG pattern applies, and none is invented — the reasoning is under Accessibility ↓

import { Component, signal } from '@angular/core';
import { PctButton } from '@pacit/components/button';
import { PctSkeleton } from '@pacit/components/skeleton';

/** The shape of content that is not here yet — and aria-busy on the region that waits. */
@Component({
  selector: 'demo-skeleton',
  imports: [PctButton, PctSkeleton],
  // A width and not only a ceiling: the stage centres its demo in a flex row, and a row hands a
  // flex item the width of its content — which, for a component whose bars are 100% OF ITS
  // CONTAINER, is nothing. Measured on the page before this line: a 0px skeleton, invisible,
  // under a heading that promised one (`lesson-160`).
  //
  // And a height for the box the skeleton stands in. Three bars are exactly three line boxes,
  // but the paragraph that replaces them wraps to two and brings a margin above and below —
  // measured 100 to 112px on the host, and the stage recentred it: 6px under the button on
  // every press (`lesson-249`). A floor of three lines and no margin keeps the box the
  // skeleton's shape in both states, which is the component's own promise.
  styles: `
    :host {
      display: grid;
      gap: 12px;
      inline-size: min(24rem, 100%);
    }
    div {
      min-block-size: 3lh;
    }
    p {
      margin: 0;
    }
  `,
  template: `
    <div [attr.aria-busy]="pending() ? 'true' : null">
      @if (pending()) {
        <pct-skeleton [lines]="3" />
      } @else {
        <p>The article arrived — three lines of it, exactly as promised.</p>
      }
    </div>
    <button
      pctButton
      variant="outline"
      size="sm"
      (click)="pending.set(!pending())"
    >
      {{ pending() ? 'Deliver' : 'Reload' }}
    </button>
  `,
})
export class SkeletonDemo {
  readonly pending = signal(true);
}

skeleton.demo.ts — the same file runs here and is highlighted under Code

Start here

Usage

One import per component, and the shortest possible use — the package itself is installed once, on the start page.

Import this component

import { PctSkeleton } from '@pacit/components/skeleton';

Exported	What it is
`PctSkeletonShape`type`'text' \| 'block' \| 'circle'`	Which drawing a skeleton is: the lines of a paragraph, one box, or one disc.
`PctSkeleton`component`pct-skeleton`	A skeleton: the shape of content that has not arrived, drawn where the content will be.

<pct-skeleton [lines]="3" />

Examples

Every state, running

Each example is the component itself, not a screenshot. Open the code under any of them.

Shapes

shape="text" draws lines with a shorter last one, the way a paragraph ends; "block" holds a box — an image, a card — at whatever size the container gives it; "circle" holds a disc, sized on either axis, with the other following.

A card that is still coming

The three shapes arranged the way an application arranges them: a disc the avatar's own size, one short line where the name will be, three where the text will be — under ONE busy region. The wait is a fact about the card, not about each placeholder inside it.

API

What it reads, and what it writes back

Read from the source at build time — the types, the defaults and the lines of documentation are the library's own.

A skeleton: the shape of content that has not arrived, drawn where the content will be.

Inputs

Name	Type	What it does
`lines`default `1`	`number`	How many lines of the surrounding text this stands in for — one by default.
`shape`default `'text'`	`PctSkeletonShape`	Lines of text, one box, or one disc — `text` by default.
`paused`default `false`	`boolean`	Stop the sheen where it stands — `false` by default, and the default is the promise.

Outputs

None of its own. The native events — (click), (focus), the form's submit — are the platform's, and two-way models above carry the rest.

What it writes on the element

The hooks a stylesheet or a test can hold. Stable by contract — the parts inventory gate fails the build when one disappears.

Attribute	Bound to	Note
`class`	`pct-skeleton`
`aria-hidden`	`true`	The component draws and does not speak. Everything below it is a box with a colour, there is no text anywhere in the template and nothing in it can take focus, so hiding the subtree costs a reader nothing and saves them a description of content that does not exist (`req-a11y-built-in`, 0050). What a reader needs to hear is `aria-busy` on the region, and the region is not ours to write on.
`data-pct-shape`	`shape()`
`data-pct-paused`	`paused() ? "" : null`

Styling

Parts to select, tokens to override

Two ways in, both stable. No class names to depend on.

Parts

In a test, PctSkeletonHarness from @pacit/components/testing reads a part by the name below and a state by its attribute — the harness gate holds the names to the package.

Part	Selector	What it is
`fill`	`[data-pct-part="fill"]`	the shimmer that travels it
`track`	`[data-pct-part="track"]`	one line of the shape

Tokens

Every value the component reads, with the light and the dark default. Override a token at any scope and it cascades like any custom property.

Token	Styles
`--pct-skeleton-fill-bg{pct.surface}`#ffffff · #0f172a	Colour of the shimmer.
`--pct-skeleton-fill-blur`6px	Blur radius of the shimmer.
`--pct-skeleton-fill-size`100%	Width of the shimmer.
`--pct-skeleton-track-bg{pct.border}`#e2e8f0 · #334155	Background of the track.
`--pct-skeleton-track-height`1cap	Height of the track.
`--pct-skeleton-track-radius{pct.radius.md}`8px	Corner radius of the track.
`--pct-skeleton-track-width-last`60%	Width of the track for the last line.

Theming

A brand override in a few declarations. Scope it to a theme attribute, a page or one container — the component never notices.

[data-theme='brand'] {
  --pct-skeleton-track-bg: #ccfbf1;
  --pct-skeleton-fill-bg: #f0fdfa;
}

Accessibility

Measured, not assumed

Pattern: none — a skeleton is not a widget and announces nothing. It is aria-hidden="true" outright, the second component in the library to be after pct-icon; what a screen reader has to hear is aria-busy on the region whose content is late, which is the consumer's own element. Named in the class JSDoc.

Keyboard

key	effect	test

Empty by design, and for the strongest reason in the library so far: nothing here can be landed on at all. The subtree is hidden from the accessibility tree, so anything focusable in it would be axe's aria-hidden-focus — apps/sandbox-e2e/src/skeleton.spec.ts asks every element in the component to focus itself and counts zero, in three engines, and tools/check-aria.mjs point 8 refuses the general case at build time (req-api-platform).

Evidence

What the repository holds for this component

Read at build time from the tracked snapshots, not typed here.

92.59%mutation score25 of 27 mutants killed

14 × 3e2e cases × enginesplus the shared audits: axe, forced colors, preferences, size, hydration

2colour pairs measuredlight and dark, at every token build

2visual baselinesChromium, the sandbox's own pictures

10elements in the preview1 listeners · 1 render to settle · 2945 µs in jsdom, held exactly but for the clock

Why it is built this way

The whole component is two answers (0050): it holds the space the content will take — a line is 1lh and the bar inside it 1cap, both computed by the browser out of the consumer's own type — and it says nothing, because there is nothing yet to say.

Known limitations

lines does not reach a block or a circle. It counts lines of text, and neither a box nor a disc has any, so shape="block" [lines]="3" draws one box. The alternative — a box three line boxes tall — needs the count inside the stylesheet, and a component may not invent a --pct-… property that is not a token of the skin.
No loading input and no content slot. The swap between the placeholder and the content is an @if the consumer already has, written where they can see it; a slot would put projected content inside an aria-hidden host, which is the one violation this component could cause.
Nothing is announced, and the region has to be marked by hand. A dev-mode warning is all this repository can do about it — the busy region is the consumer's element, and no static gate here can see their application.
No tone and no timeout. A skeleton that turned red after ten seconds would be guessing a threshold that belongs to the application, and the sentence that goes with it is not a placeholder's. paused is the same boundary drawn once more: the page says when a wait has gone on too long for the motion to keep running, because the page is the only side that knows (0073).
The sheen is one animation for all the lines at once, started when each bar is drawn. A staggered wave is a per-bar delay a skin can add; the component does not choose one.

pacit

Usage

Every state, running

Shapes

A card that is still coming

What it reads, and what it writes back

Inputs

Outputs

What it writes on the element

Parts to select, tokens to override

Parts

Tokens

Theming

Measured, not assumed

Keyboard

What is measured, and what is not yet

What the repository holds for this component

Why it is built this way

Known limitations