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.0 | loading が導入されました。 |