loading.js

loading ファイルは、Suspense を基盤とした即時のローディング状態を作成できます。

デフォルトでは、このファイルはサーバーコンポーネント (Server Component) ですが、"use client" ディレクティブを使用してクライアントコンポーネント (Client Component) としても利用可能です。

export default function Loading() {
  // またはカスタムのローディングスケルトンコンポーネント
  return <p>'Loading...'</p>
}
export default function Loading() {
  // またはカスタムのローディングスケルトンコンポーネント
  return <p>'Loading...'</p>
}

ローディング UI コンポーネントはパラメータを受け取りません。

補足

  • ローディング UI を設計する際には、React Developer Tools を使用して手動で Suspense 境界を切り替えると便利な場合があります。

バージョン履歴

バージョン変更内容
v13.0.0loading が導入されました。