スケルトンSkeletonExperimental

読み込み中のコンテンツの形を示すプレースホルダーです。

プレビュー

状態とバリエーション

カード

カードの読み込みでは、画像領域、見出し、本文の位置を先に確保します。

リスト

一覧の読み込みでは、アバターやアイコンの列とテキスト列を実際の行構造に合わせます。

本文

本文の読み込みでは、見出しと段落の行幅を変えて文章量を予告します。

ナビゲーション

ヘッダーやタブの読み込みでは、ロゴ領域とリンク幅を個別に確保します。

動画

動画の読み込みでは、プレイヤー領域、再生ボタン、タイトル行をまとめて模倣します。

テーブル行

列数を実データに合わせると、読み込み後のレイアウトずれを減らせます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
shape"rectangle" | "circle" | "text""rectangle"プレースホルダーの形です。
classNamestring-実際に表示される領域に合わせた幅、高さ、角丸を追加します。

使い方

import { Skeleton } from "@gunjo/ui";

export function Example() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton shape="circle" />
      <div className="space-y-2">
        <Skeleton shape="text" className="w-32" />
        <Skeleton shape="text" className="w-48" />
      </div>
    </div>
  );
}

使用コンポーネント

Skeleton

関連コンポーネント

ImgImagePreviewTable

設計の判断（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: Skeletonレスポンスと待ち時間設計 (Response Latency)ドハティの閾値 (Doherty Threshold)労働の錯覚 (Labor Illusion)