第 4 步：加载状态
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 42 课，共 47 课。
挑战
简单为菜品路由添加骨架屏。
- 完成文件
app/menu/[slug]/loading.jsx，导出一个默认组件（不接收属性，不是异步组件）。 - 返回一个包含
<div>的<div className="detail">，其中id="dish-skeleton"，且className="detail-thumb skeleton"。 - 添加第二个子元素，设置
className="empty"，并使用任意等待提示文字，要比 Loading 这个词更好。
亲手试试
import Link from 'next/link';
import './globals.css';
export const metadata = {
title: {
default: 'Coddy Eats',
template: '%s | Coddy Eats',
},
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<nav className="nav">
<Link className="brand" href="/">Coddy Eats</Link>
<Link id="nav-menu" href="/">Menu</Link>
<Link id="nav-desserts" href="/?category=dessert">Desserts</Link>
</nav>
<div className="container">
{children}
</div>
</body>
</html>
);
}Next.js 基础中的所有课
8项目：Coddy Eats
第 1 步：页面框架第 2 步：菜单网格
第 3 步：菜品页面第 4 步：加载状态第 5 步：页面标题第 6 步：加入购物车第 7 步：分类筛选第 8 步：留下评价第 9 步：实时搜索