Introduction

A placeholder used to indicate that content is loading, with a variety of animation and shape options.

Usage

Basic Skeleton

import { Skeleton, SkeletonCircle, SkeletonText } from "../components/ui";

export default function MyPage() {
  return (
    <div>
      <SkeletonCircle size="12" />
      <Skeleton height="6" width="40" />
      <SkeletonText noOfLines={3} />
    </div>
  );
}

CMS Page Builder

This component is available as a skeleton block in the Page Builder (content/pages/*.json). The CMS shape options are box/circle/text, mapped to the real shape prop (box falls through to the plain default):

{
  "type": "skeleton",
  "shape": "text",
  "noOfLines": 3
}

Props

Skeleton

Prop	Type	Description
loading	boolean	Whether to show the skeleton. Default: true.
circle	boolean	Render the skeleton as a circle.

| variant | `"pulse" \ | "shine" \ | "none"` | The animation style. |

| class | string | Custom CSS classes for the root element. |

All other native <div> attributes (e.g. style, id, width, height) are forwarded to the underlying element.

SkeletonCircle

Same props as Skeleton, pre-configured with circle.

SkeletonText

Prop	Type	Description
noOfLines	number	Number of lines to display. Default: 3.

| gap | `string \ | number` | Gap between lines. Default: "2". |

Plus all Skeleton props.