本文へ移動

§16-16Motion

Skeleton → fade in

読み込み中の骨組みから実データへ滑らかに切り替える。

待ち時間に画面の形を先に見せて、完成時の切り替えを穏やかにする。表示がいきなり現れて目が泳ぐ問題に効く。

実装のポイント

スケルトンは実コンテンツと同じ寸法で組み、差し替え時のレイアウトシフトを防ぐ。差し替え後は opacity の短い transition で実データをフェードインさせる。

特徴
  • アニメーション
  • 非同期
  • モック
デモで使っているもの
  • shadcn/ui
  • lucide-react