ダウンロードと待機状態

1）待機を管理する理由

• （1）何が始まったのか、（2）どれくらいかかるのか、（3）何かがおかしくなったらどうするのか。
• 良いブートステータスは不安を軽減し、集中力を維持し、時間を節約します。

2）パターン選択： スケルトン、進行状況、スピナー、ストリーミング

スケルトン-将来のコンテンツの構造が知られているが、データがない場合。CLSを防止します。
プログレスバー（決定論的）-ボリュームまたはステージが既知の場合（例えば、apload、 KYC）。
不確定な進捗-期間が不明な場合、プロセスは実際のものです（初期化）。
スピナー-600-800ミリ秒までの短い表示器としてだけ；さらに-スケルトン/進行状況/テキスト。
ストリーミング/部分レンダリング-部品（SSR/セグメント）のデータを提供し、完成したゾーンをすぐに表示します。

ルール：空のスペースにユーザーを残さないでください。1s以上の場合-構造と意味を与えます。

3）時間のしきい値と予算（ベンチマーク）

≤ 100 ms-インスタントビジュアルレスポンス：ボタン/フィールドの'busy'。

≤ 1000 ms-スケルトン/インジケータ+テキスト「Load……」

4）即刻の応答のマイクロパターン

私たちは、コントロールをすぐに「ビジー」に転送します（アニメーション≤ 100ミリ秒）、繰り返しクリックをブロックします。
ボタンのテキストを「Send……」に変更し「、Request accepted」（オプション）トーストを表示します。
フォーカスがフィールドに戻ると、ローカルスケルトンは結果ゾーンになります。

5）「ジャンプ」のないスケルトン"

将来のコンテンツの1：1形式を描画します：ブロックハイト、メディアプロポーション（'aspect-ratio'）。
アニメーションの輝き：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）進捗状況とマイルストーン