102. Loading States（読み込み状態の全パターン：ユーザーを「退屈」させない演出術）

原理：待ち時間を「体験」に変える

待たされる時間は、実際より長く感じる

行列のできるお店で、「あと何分です」と言われないまま待たされるのは苦痛です。しかし、メニューを渡されたり、中を覗けたりすれば、同じ10分でも短く感じます。 Webアプリも同じです。通信中の「ローディング状態（Loading States）」をいかにデザインするかは、ユーザーがあなたのアプリを「速い」と感じるか「遅い」と感じるかを決める、非常に重要な要素です。

HTMXには、ただ「ぐるぐる（スピナー）」を出すだけではない、多彩なローディング演出のための機能が備わっています。

実践：状況に合わせた「待ち方」のバリエーション

1. インジケーターの表示（復習と応用）

第5章（093.）で学んだ hx-indicator です。これは「何かを出す」ための基本です。

2. 要素の無効化（ボタンの連打防止）

通信中にボタンを薄くしたり、クリックできなくしたりして、二重送信を防ぎつつ「今頑張ってるよ」と伝える例です。

/* 通信中のボタンの見た目 */
.htmx-request {
    opacity: 0.5;
    pointer-events: none; /* クリックを無効化 */
    cursor: wait; /* マウスカーソルを待機状態に */
}

3. テキストの変更

ボタンの文字そのものを「保存する」から「保存中...」に変えてしまう、非常に直感的な手法です。これはCSSの content プロパティを使ってHTMXのクラスと組み合わせることで、JavaScriptなしで実現できます。

button.htmx-request {
    color: transparent; /* 元の文字を消す */
}
button.htmx-request::after {
    content: "送信中...";
    color: black;
    position: absolute; /* ボタンの中央に配置 */
    /* ...レイアウト調整... */
}

比較：どのローディング演出を選ぶべきか？

演出タイプ	特徴	おすすめの場面
スピナー	最も一般的。	重いデータの読み込み。
テキスト変更	非常に分かりやすい。	送信、登録ボタン。
スケルトン	期待感を高める。	ダッシュボード、リスト表示。
進捗バー	残り時間が明確。	ファイルのアップロード。

まとめ：初心者のための「配慮」のパターン

ローディング状態をデザインすることは、ユーザーへの「おもてなし」そのものです。

0.2秒の壁: 0.2秒以内に終わる通信なら、インジケーターは出さないほうがいいかもしれません（パッと出すぎて目がチカチカするため）。
「どこ」を変えるか: データを読み込む場所そのものを変えるのか、ボタンを変えるのか。ユーザーの視線がいまどこにあるかを考えて配置しましょう。
一貫性が大事: アプリ全体でローディングの出し方を統一することで、ユーザーは「あ、これが出ている間は待てばいいんだな」と学習してくれるようになります。

退屈を、安心へ。多彩なローディング状態を使いこなして、待ち時間さえも心地よいリズムの一部に変えてしまう、魅力的なWebアプリを構築してください。次の記事では、さらに具体的に進捗を見せる「プログレスバーの実装（103. Progress Bars）」をご紹介します。