推荐方案:同构骨架(业内常用思路)
参考主流产品的稳定方案(Dashboard/Design System 常见做法):
1) 永远渲染真实结构,只切换“内容形态”
不要 if (loading) return totally different jsx。
改成:
- 外层结构(grid、row、button、chart container)永远同一套
- loading 时:
- 文本节点 color: transparent + position: relative
- 用伪元素或覆盖层画 shimmer
- 交互控件
disabled(但保持同尺寸)
loaded时恢复真实内容
一句话:同一个盒子、同一个节点、同一个布局轨道,只换皮肤。