下載狀態和等待

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）進展和裏程碑