TOC

• loading 是什麼
• 使用方式
• 一些建議

loading 是什麼

loading 是 app router 中的特殊保留字，建立以 loading 為命名的 component 後，在頁面讀取期間
可以先顯示 loading UI。

youtube 在載入時，也會先讓使用者看到一個 sketlon 的 loading UI。

使用方式

1. 建立 loading 檔案
2. export default loading component

• 建立 loading 檔案
  
• export default loading component

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

loading 與 Suspense

在 Day9 鐵人賽 有提到可以用 Suspense 來包住 async server component，在讀取期間先顯示 fallback UI，直到這個 server component 讀取完才會替換掉。

loading 則是 page 的 fallback UI，也是用 Suspense 實作。只是 Next 會對 loading component 做一些額外的優化，所以 page-level 的 Suspense 建議還是使用預設的 loading component 實作。

參考資料

• Next - loading & streaming
• Next.js 13 and React Suspense: Create a loading component