loading.js

loadingファイルは、Suspenseを基にした即時ロード状態を作成できます。

デフォルトでは、このファイルはServer Componentですが、"use client"ディレクティブを使用することでClient Componentとしても使用できます。

TypeScript

app/feed/loading.tsx

export default function Loading() {
  // またはカスタムの読み込みスケルトンコンポーネント
  return <p>Loading...</p>
}

JavaScript

app/feed/loading.js

export default function Loading() {
  // またはカスタムの読み込みスケルトンコンポーネント
  return <p>Loading...</p>
}

Loading UIコンポーネントは、パラメータを受け取りません。

Good to know:

• Loading UIを設計する際には、React Developer Toolsを使用して、suspense boundaryを手動で切り替えることが役立つかもしれません。

バージョン履歴

バージョン	変更点
v13.0.0	loadingを導入