Skeleton 骨架屏

基于 skullet：

• Skeleton：data 为空时，用 sample 把真实组件隐形地渲染一遍，在每行文字和每个控件上盖一条骨架；数据到了直接换成内容，什么都不会移动。内容高度会变的（列表）要给 id，骨架形状按它记住。
• SkeletonBox：单独一条骨架，给没有组件可量的地方（图表、表格行）。
• 形状记在 localStorage，退出登录时调用 forgetShapes()。
• 手写表格的 <TableBody> 用 Table 的 TableSkeletonRows。

安装复制链接

pnpm dlx shadcn@latest add https://docs.linasan.cn/r/skeleton.json

用法复制链接

import { Skeleton, SkeletonBox } from '@/components/ui/skeleton';

<Skeleton id="user-form" data={data} sample={SAMPLE_USER}>
  {(user) => <UserForm user={user} />}
</Skeleton>

属性复制链接