Skeleton

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

import { Skeleton } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function SkeletonBasic() {
  return (
    <Preview stack={true}>
      <Skeleton.Root className="h-4" />
      <Skeleton.Root className="h-4 w-2/3" />
    </Preview>
  );
}

• Match the real layout: the same row height, the same columns. Set the size and shape with className.
• Use it where content of a known shape is loading. A Spinner is for places where no shape fits.
• It is hidden from screen readers. The pulse stops when the reader prefers reduced motion.

API

Parts: Root. Other props go to the native div.