骨架屏
Skeleton也常被叫作：骨架加载灰色占位块加载占位SkeletonShimmer
「页面加载时先显示一排灰色方块占位，形状跟最终内容差不多，加载完变成真内容。」
骨架屏 Skeleton
内容加载完成前显示的灰色占位块，形状模仿真实布局，告诉用户「这里马上有东西」。
骨架屏（Skeleton）是内容还没加载出来时显示的灰色占位：形状跟最终内容一致——标题是宽条、正文是几行短条、图片是方块——带轻微的闪烁或扫光动画，加载完成后被真实内容替换。它要说的话是：「这块地方会有东西，正在来」，而不是一片空白让你以为坏了。
骨架屏和转圈（spinner）的区别很实际：转圈只说「在等」，骨架屏说「在等什么」——用户能看出这里会是一张图还是一段文字，心理预期完全不同。所以骨架屏必须模仿真实布局：标题区宽条、正文短条、图片方块，位置和最终内容对得上。随便放几块灰条跟布局对不上，反而让用户困惑。
两个高频翻车点。第一，骨架屏和空[状态](/reference/t/empty-state/)混为一谈：加载完发现没数据，该显示空[状态](/reference/t/empty-state/)（「还没有项目」+ 按钮），不能让骨架永远闪，更不能直接变空白。第二，加载失败也一直闪骨架：接口报错要换成「加载失败 + 重试」的提示。骨架屏是过渡不是终点，任何状态停留过久都是 bug。另外本地数据几乎瞬间出来时不要闪骨架——一闪而过反而晃眼。
长什么样 真实可交互，不是截图
正在加载…
灰色占位块模仿真实内容的样子，加载完会被真实数据替换。注意骨架屏只是过渡：加载完没数据要换成空状态，加载失败要换成错误提示 + 重试，不能永远闪。
拆开看，里面有这几块
-
1
占位块 Skeleton block
模仿真实内容的灰色块：标题宽条、正文短条、图片方块。
-
2
动画 Animation
轻微闪烁或扫光，提示「在加载」，不能太晃。
-
3
布局 Layout
位置和真实内容一致，替换时不会跳变，用户能对上号。
常见的有哪几种
多行「短条」模仿列表项，行高和真列表一致。
用在：列表页加载
图片块 + 文字条模仿卡片结构。
用在：卡片流、商品列表
图片加载前显示灰色方块，加载完淡入图片。
用在：大图、头像、封面
容易搞混？这样区分
转圈只说「在等」；骨架屏说「在等什么」——形状模仿真实布局。加载慢、布局明确的页面用骨架屏；不确定等多久的简单场景，转圈就够了。
什么时候用得上
显示几行与列表项等高的灰色条，加载完变真列表。
图片位置先显示灰色方块，加载完淡入图片。
整页按真实布局摆骨架，避免白屏，加载完平滑替换。
你可以这样跟 AI 说
直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。
【范围】只改 [这个页面] 的加载状态，不动有数据时的布局 【要求】 - [列表 / 图片 / 页面] 加载期间显示骨架屏：灰色占位块，形状模仿真实布局（标题宽条、正文短条、图片方块），位置和真实内容对得上 - 骨架屏带轻微闪烁或扫光动画，不能太晃 - 加载完成后骨架被真实内容平滑替换，不生硬跳变 - **加载完没数据**：换成空状态（说明 + 动作按钮），不许永远闪骨架 - **加载失败**：换成「加载失败 + 重试」提示，不许永远闪骨架 - 本地数据几乎瞬间出现的场景不要闪骨架，避免一闪而过 【边界】不要改有数据时的页面布局；不要新增第三方组件库 【交付】告诉我改了哪些文件、我怎么制造一次慢加载看到骨架屏、加载完它变成什么、以及哪部分你没验证
这段话最关键的是「加载完没数据换成空状态、加载失败换成错误提示」——AI 最常把骨架屏做成唯一状态，数据没回来就一直闪，用户分不清是加载中、没数据还是坏了。
它说「做好了」，你怎么自己验
这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。
要亲眼看到这些，才算数
- 把网络调慢（浏览器开发者工具限速）或首次打开，看到骨架屏出现：灰色占位块，形状和真实布局一致。
- 骨架屏最终被真实内容替换，不会永远闪。
- 骨架形状模仿真实布局：标题宽条、正文短条，不是随便几块灰条。
- 加载完没数据时显示空状态（说明 + 按钮），不是永远闪骨架也不是空白。
- 把接口弄挂（断网刷新），显示的是「加载失败 + 重试」而不是永远闪骨架。
- 骨架出现不闪眼、消失不跳变。
它常这么糊弄你
- 「骨架屏已加」——但只是随便放了几块灰条，跟真实布局对不上。
- 骨架屏永远在闪，数据根本没加载出来——没接真实数据。
- 加载完没数据也一直闪骨架，或者变空白——没接空状态。
- 接口报错也一直闪骨架——没接失败提示。
- 数据瞬间就出来了还闪一下骨架——晃眼，体验更差。
骨架屏能验到「主路径」层：调慢网速看它出现、等它被替换、断网看失败提示，就验完了。重点较真「骨架不是唯一状态」——没数据、出错都得有各自的出口。
考考你 选一个你觉得对的
列表加载完，发现真的没有数据。这时候应该显示什么？
骨架屏是加载中的过渡，加载完就该让位：有数据显示内容，没数据显示空状态，失败显示错误提示。B、C 让用户以为坏了，D 是撒谎——数据不是还在路上，是真的没有。