components

Skeleton

Skeleton renders an animated placeholder shape used to indicate loading content. It provides a visual preview of the page layout before data arrives, reducing perceived load time and preventing layout shift. The component supports two variants: 'text' (default, rectangular) and 'circle'. Dimensions can be customized via the width, height, and borderRadius props. The animation color can be overridden through CSS custom properties --brz-skeleton-background-color and --brz-skeleton-animation-color.

Import

import { Skeleton } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Show loading placeholders that match the shape of incoming content.
+Improve perceived performance during data fetching.
+Replace spinners when the content layout is known.

When not to use

−For indeterminate loading with unknown layout — use Loader.
−For instant actions that complete in <200ms.
−For error states — show actual error messages.

Examples

Code Samples

Text Skeletons

Rectangular skeletons of varying widths to simulate text content loading.

import { Skeleton } from "@skedulo/breeze-ui-react";

export default function TextSkeletons() {
  return (
    <div className="space-y-3" style={{ width: 320 }}>
      <Skeleton width="80%" height="16px" />
      <Skeleton width="100%" height="16px" />
      <Skeleton width="60%" height="16px" />
    </div>
  );
}

Circle Skeleton

Use variant='circle' for avatar or icon placeholders.

import { Skeleton } from "@skedulo/breeze-ui-react";

export default function CircleSkeleton() {
  return (
    <div className="flex items-center gap-3">
      <Skeleton variant="circle" width="40px" height="40px" />
      <div className="space-y-2 flex-1">
        <Skeleton width="140px" height="14px" />
        <Skeleton width="200px" height="12px" />
      </div>
    </div>
  );
}

Card Loading State

Combine skeletons to mimic the layout of a card before its content loads.

import { Skeleton } from "@skedulo/breeze-ui-react";

export default function CardSkeleton() {
  return (
    <div className="border border-gray-200 rounded-lg p-4 space-y-4" style={{ width: 320 }}>
      <Skeleton width="60%" height="20px" />
      <div className="space-y-2">
        <Skeleton width="100%" height="14px" />
        <Skeleton width="100%" height="14px" />
        <Skeleton width="75%" height="14px" />
      </div>
      <Skeleton width="100px" height="32px" borderRadius="6px" />
    </div>
  );
}

Guidelines

Do

✓Match skeleton dimensions to the expected content.
✓Use variant='circle' for avatars and 'text' for text lines.
✓Animate skeletons to indicate loading.

Don't

✗Don't show skeletons for more than 3-5 seconds — show an error or timeout.
✗Don't use skeletons for content that's already cached.

API Reference

Prop	Type	Default	Description
variant	"text" \| "circle"	"text"	Shape of the skeleton. Use "text" for lines and blocks, "circle" for avatars and icons.
width	string	"100%"	CSS width value (e.g. '200px', '100%', '3rem').
height	string	"20px"	CSS height value.
borderRadius	string	—	CSS border-radius override. Defaults to a small radius for text, 50% for circle.
ariaLabel	string	"Loading..."	Accessible label announced by screen readers.

Related Components

Loader Card