Skip to main content

加载态

在使用 React Suspense 时，loading.js 可帮助创建加载态

通过此约定，您可以在加载路由内容时显示服务器的即时加载状态

即时加载状态是后备 UI， 在导航时立即显示。

例如骨架和旋转器，或未来屏幕的一小部分但有意义的部分，例如封面照片、标题等。

这有助于用户了解应用程序正在响应，并提供更好的用户体验。

使用​

- app
  - layout.js
  - dashboard
    - layout.js
    - loading.js
    - page.js
export default function Loading() {
  // You can add any UI inside Loading, including a Skeleton.
  return <LoadingSkeleton />;
}
// 父page
<Layout>
  <Header />
  <Suspense fallback={<Loading />}>
    <Page />
  </Suspense>
</Layout>

平行路由使用独立加载态​

- @team
  - page.js
  - error.js
  - loading.js
- @analytics
  - page.js
  - error.js
  - loading.js