Skeleton

Skeleton renders an animated loading placeholder that mimics the shape of the content it represents, reducing perceived load time.

Installation

npm install @libretexts/davis-react

Basic Usage

import { Skeleton, Stack } from '@libretexts/davis-react';

export default function Example() {
  return (
    <Stack gap="sm">
      <Skeleton variant="text" />
      <Skeleton variant="text" className="w-3/4" />
      <Skeleton variant="rectangular" className="h-32" />
    </Stack>
  );
}

When to use

• Skeleton — Use while content is loading to prevent layout shifts and reduce perceived wait time. Match the skeleton shape to the content that will replace it.
• Spinner — Use for indeterminate loading states where the content shape is unknown (e.g., submitting a form).