Components

Skeleton

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

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

Skeleton has role="status" and aria-busy, and reads a visually hidden “Loading content”. The highlight crosses three times and stops.

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

export default function Default() {
  return (
    <Provider locale="en-GB">
      <div className="w-80">
        <Skeleton lines={3} />
      </div>
    </Provider>
  );
}

Shapes

shape: text lines, a 16:9 block, a 32 px circle.

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

export default function Shapes() {
  return (
    <div className="flex w-80 flex-col gap-lg">
      <Skeleton lines={2} />
      <Skeleton shape="block" />
      <Skeleton shape="circle" />
    </div>
  );
}

Card placeholder

When several parts stand for one item, give the status role to the container and make the parts decorative.

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>
  );
}

Showing content when loaded

With loading={false}, children replace the placeholder and appear with motion.reveal.

import { Button, Skeleton } from '@bigbang/ui';
import { useState } from 'react';

export default function Reveal() {
  const [loading, setLoading] = useState(true);
  return (
    <div className="flex w-80 flex-col gap-md">
      <Skeleton lines={2} loading={loading}>
        <p className="type-body-md text-fg-default">Card description goes here.</p>
      </Skeleton>
      <div>
        <Button variant="secondary" size="sm" onClick={() => setLoading((value) => !value)}>
          Toggle loading
        </Button>
      </div>
    </div>
  );
}

Light and dark mode

The background is color-surface-sunken, the highlight color-surface-raised.

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

export default function Shapes() {
  return (
    <div className="flex w-80 flex-col gap-lg">
      <Skeleton lines={2} />
      <Skeleton shape="block" />
      <Skeleton shape="circle" />
    </div>
  );
}