加载状态
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 26 课，共 47 课。
异步页面的速度取决于加载最慢的部分。在 Next.js 等待时，用户究竟在看什么？
在页面旁边放一个 loading.jsx，答案就是：你想要什么都行。
app/
slow/
page.jsx the async page
loading.jsx shown while it resolves这是一个普通组件，使用默认导出，并且不接收任何属性：
export default function Loading() {
return <p>Loading the special…</p>;
}你无需自己渲染它，也无需导入它。把这个文件放在页面旁边，就能为该页面包上一层 Suspense 边界：导航时，Next.js 会立即显示 loading.jsx，等所有 await 完成后再替换为真正的页面，外围布局也不会闪烁。
根据文件所在的位置，可以得出两点：
- 它会覆盖同级页面以及下面所有嵌套的内容，直到更深层的
loading.jsx接管 - 只有页面会切换：布局中的页眉和导航保持不变，并且仍可点击
注意你没有写什么：没有加载标志，没有状态，也没有 if (loading)。文件名就是实现机制。
挑战
简单app/slow/page.jsx 会等待缓慢加载，而 app/slow/loading.jsx 已存在，但内容为空。
- 在它的
<main>中添加一个带有id="loading"的<p>。 - 其中的文本必须与
Loading the special...完全一致。
页面和 lib/data.js 已锁定。测试会导航到 /slow，并在数据到达之前查看屏幕。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
