§15-01Perceived Performance
Skeleton loader
読み込み中にコンテンツの形を灰色で示す。
空白やスピナーより何がどこに現れるかが先に分かり、待ち時間が短く感じられる。一覧やカードなど形が決まった領域の読み込みに使う。
実装のポイント
スケルトンは実コンテンツと同じ寸法で組み、読み込み完了時のレイアウトシフトを防ぐ。読み込み中は領域に aria-busy=true を付ける。
- 特徴
- アニメーション
- タイマー
- デモで使っているもの
- shadcn/ui
- lucide-react