Web + MobileStableRetours

Web et mobile — le même composant pour React et React Native. Stable : son API ne change qu’à une version majeure.

Quand l’utiliser

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

Quand ne pas l’utiliser

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

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	Description
`shape`	`"circle" \| "rect" \| "text"`	`text`	text (a line) · circle (an avatar; give it a height) · rect (a media; give it a height).

Accessibilité

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

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Skeleton