Components

Skeleton

A placeholder in the shape of content that is still loading.

Storybook: Storybook
Source: Source

When to use

Skeleton is for areas whose content shape is known and whose loading can take over a second: card lists, profile summaries, table rows.

When not to use

When the shape is unknown: Use a Spinner.
While waiting for an action: Use Button loading.
For waits shorter than a second: Show no placeholder; show the content when it arrives.

Anatomy

import { Skeleton } from '@bigbang/ui';

export default function Card() {
  return (
    <div role="status" aria-busy="true" className="flex w-80 items-start gap-md">
      <Skeleton shape="circle" decorative />
      <div className="flex flex-1 flex-col gap-sm">
        <Skeleton width="60%" decorative />
        <Skeleton lines={2} decorative />
      </div>
      <span className="sr-only">Loading card</span>
    </div>
  );
}

Circle: the avatar’s place; circle.
Lines: the title and text’s place; text, the last of several at 60 %.
Highlight: a light band crossing from left to right.

Behaviour

The highlight crosses three times at period-shimmer (1500 ms), then stops.
Under reduced motion the highlight never crosses; the placeholder stays still.
loading={false} removes the placeholder when content arrives; the content appears with motion.reveal.
Text lines follow the surrounding body-md font size.

Guidelines

Shape the placeholder like the real layout; the page must not shift when loading ends.
Use one status role per item; make the parts decorative.
Show at most one region per page as a placeholder; fill the others as content arrives.

Content

label says what is loading: “Loading card”.
The default text is the library string.

Turkish	English
İçerik yükleniyor	Loading content
Kart yükleniyor	Loading card

Spinner: a wait whose shape is unknown.
Button: a button whose action is running.