Menu

loading.js

loading 文件可以创建基于 Suspense 的即时加载状态。

默认情况下，这个文件是一个 服务器组件，但也可以通过 "use client" 指令作为客户端组件使用。

app/feed/loading.tsx
export default function Loading() {
  // 或者一个自定义的加载骨架组件
  return <p>Loading...</p>;
}
app/feed/loading.js
export default function Loading() {
  // 或者一个自定义的加载骨架组件
  return <p>Loading...</p>;
}

加载 UI 组件不接受任何参数。

值得注意的是

  • 在设计加载 UI 时，你可能会发现使用 React 开发者工具 手动切换 Suspense 边界很有帮助。

版本历史

版本变更
v13.0.0引入 loading。