LoadingUIAndStreaming

Next.jsではReact Suspenseとしてページ全体をローディングにすることができる機能がある。

以下のように、layout.tsxを作成し、default exportする。
このファイルの内容をSpinnerにすればローディングUIが完成する。

app/
|-- page.tsx
|-- dashboard/
|   |-- page.tsx
|   |-- loading.tsx
|   |-- settings/
|       |-- page.tsx
|       |-- loading.tsx

サーバーコンポーネントであれば、fetchしてawaitしている間にloading.tsxの内容が表示されるという機能にする。

app/dashboard/loading.tsx

export default function Loading() {
  // You can add any UI inside Loading, including a Skeleton.
  return <LoadingSkeleton />
}

スケルトンを表示するようにしておけばいい感じ。