Loading Skeleton とは？

loading skeleton は、実際のデータの読み込み中に、灰色のブロックやシマーする形状を使ってコンテンツのレイアウトを描き出す placeholder のレンダリングです。最終的なコンテンツが占めるのと同じスペースを占め、構造と進捗を伝えます。データが到着すると、skeleton は実際の UI に置き換えられます。

なぜ重要か

skeleton は体感の待ち時間を減らし、スペースを予約することで、コンテンツが現れたときの layout shift を避けるのに役立ちます。これは suspense boundary 内でよく使われる fallback です。

関連ガイド