すべてのロードが完了した後に再生したいアニメーションがありますか？ “本当の”状態を表示する前にAPI呼び出しをしたいですか？ または、画像/CMS/コンテンツが完全に読み込まれてからトランジションを開始すべきコンポーネントがありますか？『Loading…』を投入してそれがうまくゲートを処理します。

条件が満たされると（ページがロードされる、最小時間が経過する、または最大タイムアウトになる）、次のコンポーネント状態に自動的にトランジションされます。ハックなし、偽のオーバーレイローダーなし、ぎこちないフラッシュなし。

動作の仕組み

コントロールしたいコンポーネント内にLoading…を追加します。それが「ゲート」となり、ユーザーが最終状態を見ることができるタイミングを決定します。 規則を設定し、Loading…がタイミングとトランジションを処理します。

ゲートの動作

Loading…がゲートを解放できる条件:

• ページが完全に読み込まれた時（「実際に準備ができるまで表示しない」モード）

• 最小時間（トランジションが意図的に感じられるようにするため、ちらつきではなく）

• 最大時間/タイムアウト（何かが長すぎる場合でもユーザーが進むために詰まらないようにするため）

1つを使用するか、望む体験に応じて組み合わせてください。

進捗 + スタイル

雰囲気を選んでブランドの一貫性を保つ:

• サークル、バー、またはテキストのローディングスタイル

• UIに合うようにモーション + 感触を調整する

• より明確なUXのためのラベルサポート（オプション）