Skeleton

データ取得中にコンテンツの形を維持したローディング表示。全画面スピナーより体感速度が速く感じられ、レイアウトシフトも防ぐ。

インストール

npx shoji add skeleton

プレビュー

使用例

使い方

こんなときに使う

  • APIからデータを取得するまでの待機表示
  • 画像・テキスト・カードなど、表示予定のコンテンツの形に合わせて配置
  • テーブルやリストの件数が不明な場合（固定件数分のスケルトンを表示）

使わないほうがいい場面

  • 0.5秒以内に完了する操作（ちらつきが生じる）
  • ローディング中のインタラクション（ボタンクリックなど）への応答表示（スピナーのほうが適切）

JP 最適化のポイント

  • bg-slate-200 を固定で使用 — 日本語コンテンツは英語より行数が増えやすいため、一貫したスケルトン色が重要
  • aria-busy="true" + role="status" を付与 — スクリーンリーダーがローディング中であることを伝える