Web + MobileStableFeedback

Web and mobile — the same component for React and React Native. Stable: its API only changes in a major version.

When to use

While a list, a card or a profile loads, in its final layout: the page does not jump when it arrives.

When not to use

For an action the user is waiting on (a save).Use instead: Spinner
When there is nothing to load.Use instead: Empty state
For the progress of a task.Use instead: Progress

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Skeleton } from "@krizaka/ui/skeleton";

Examples

Text

A line of text.

import { Skeleton } from "@krizaka/ui/skeleton";

export default function SkeletonText() {
  return <Skeleton />;
}

Circle

An avatar.

import { Skeleton } from "@krizaka/ui/skeleton";

export default function SkeletonCircle() {
  return <Skeleton shape="circle" />;
}

Rect

A media or a block.

import { Skeleton } from "@krizaka/ui/skeleton";

export default function SkeletonRect() {
  return <Skeleton shape="rect" />;
}

Composition

Shapes composed into a card being loaded.

import { Skeleton } from "@krizaka/ui/skeleton";

export default function SkeletonComposition() {
  return (
    <div className="flex flex-col gap-3 rounded-xl border border-border-default bg-surface-1 p-4">
      <Skeleton shape="rect" className="h-32" />
      <div className="flex items-center gap-3">
        <Skeleton shape="circle" className="h-8" />
        <div className="flex flex-1 flex-col gap-2">
          <Skeleton />
          <Skeleton className="w-2/3" />
        </div>
      </div>
    </div>
  );
}

Props

A pulsing shape the size of what is loading. Announce the wait elsewhere (aria-busy on the region, a Spinner).

Prop	Type	Default	Description
`shape`	`"circle" \| "rect" \| "text"`	`text`	text (a line) · circle (an avatar; give it a height) · rect (a media; give it a height).

Accessibility

Decorative and hidden from assistive technology: announce the wait elsewhere (aria-busy on the region, a Spinner).
The pulse stops under prefers-reduced-motion.

Best practices

Compose the shapes like the content: an avatar circle, two lines, a media block.
Show skeletons only after a short delay on fast connections, and never for more than a few seconds without a message.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Skeleton