下载状态和等待

1）为什么要管理等待

• （1）行动已经开始，（2）需要多少钱，以及（3）如果出现问题，该怎么办。
• 良好的加载状态可以减少焦虑，保持焦点并节省时间。

2）选择模式： skeleton, progress, spinner, streaming

Skeleton-当知道未来内容的结构但没有数据时。防止CLS。
进度bar（确定性）-当已知音量或步骤（例如apload，KYC）时。
Indeterminate progress-当持续时间未知时,但过程是真实的（初始化）。
Spinner-仅作为可达600-800毫秒的简短指示器；接下来是skeleton/进度/文本。
Streaming/partial render-分批给出数据（SSR/片段）,并一次显示完成的区域。

规则：不要将用户留在"空地"。如果大于1 c-给出结构和含义。

3）时间阈值和预算（基准）

≤ 100毫秒是即时视觉响应：按钮/字段上的"忙碌"。

≤ 1000毫秒-skeleton/指示器+文本"我们下载……"

4）微型即时响应模式

让我们立即将控制权转换为"忙碌"（动画≤ 100毫秒），阻止重复点击。
我们将按钮文本更改为"发送……"，我们显示"已接受请求"敬酒（可选）。
返回现场焦点时，结果区域中的本地skeleton。

5）Skeleton没有"跳跃"

绘制未来内容的1：1形式：块高度，媒体比例（"aspect-ratio"）。
Shimmer动画：1200-1600毫秒，亮度幅度≤ 20%，无频带。
大列表-虚拟化+限制DOM中的骨架数量。

css
.skeleton{position:relative; background:var(--bg-elevated); border-radius:12px; overflow:hidden}
.skeleton::after{
content:"";position:absolute; inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
animation:shimmer 1. 4s infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

6）进展和里程碑