093. hx-indicator（処理中の明示：「今頑張っています」を視覚的に伝える）

原理：沈黙という名の「最大のストレス」を消す

通信中の「空白の時間」をどう埋めるか

Webアプリを使っていて最も不安になる瞬間は、ボタンを押したあとに「画面が全く動かなくなる数秒間」です。「あれ？押せてなかったかな？」「ネットが切れた？」「フリーズした？」

「hx-indicator（エイチエックス・インジケーター：表示器）」は、「通信が始まった瞬間に姿を現し、通信が終わった瞬間に姿を消す」という、ローディング（読み込み中）アニメーションを制御するための属性です。

「今、あなたのリクエストを処理していますよ」というメッセージを視覚的に出し続けることで、ユーザーの不安を解消し、アプリとしての信頼度を飛躍的に高めることができます。

実践：読み込み中をドラマチックに見せる

1. スピナー（ぐるぐる）を表示する

ボタンの隣に「読み込み中...」という画像やアイコンを出す、超定番の例です。

<style>
  /* 
    最初は隠しておき、HTMXが通信中に付ける 
    "htmx-request" クラスを使って表示させます。
  */
  .my-indicator { display: none; }
  .htmx-request .my-indicator { display: block; }
  .htmx-request.my-indicator { display: block; }
</style>

<button hx-get="/api/refresh" hx-indicator="#spinning-icon">
    更新する
</button>

<img id="spinning-icon" class="my-indicator" src="spinner.gif" alt="読み込み中...">

2. 「どこに」表示を付けるか（セレクタ指定）

hx-indicator には ID や CSSセレクタを書くことができます。指定された要素に、HTMXが通信中だけ .htmx-request という特別なクラスを自動で付け外ししてくれます。

3. ステップ・バイ・ステップ解説

出すものを用意する: 画像や「Loading...」という文字をHTMLに書き、CSSで最初は消しておきます。
ボタンと紐付ける: ボタンに hx-indicator="#用意したID" を書きます。
スタイルの設定: htmx-request クラスがついた時に「見えるようになる」CSSを一行書きます。

比較：手動の表示制御 vs hx-indicator

JavaScript で書く場合

button.onclick = () => {
  spinner.show();
  fetch('/api').then(() => spinner.hide());
}

「開始時に出す」「終了時に消す」という二つの命令を、通信ごとに書く点に。

HTMX (hx-indicator)

<button hx-indicator="#spinner">

命令は不要。HTMXが通信のライフサイクル（開始から終了まで）を監視し、正確なタイミングでクラスを入れ替えてくれます。

まとめ：初心者のための「安心感」の設計

hx-indicator は、あなたのWebサイトにシステムとしての「鼓動」を感じさせるための機能です。

「反応」は最大のギフト: 通信が1秒以上かかる可能性があるなら、必ずインジケーターを付けましょう。たったそれだけで、ユーザーの「離脱率」は劇的に下がります。
ボタン自体の無効化とセットで: 通信中にボタンを薄くしたり、押せなくしたりする演出も、このクラスを使えばCSSだけで簡単に実現できます。
デザインへのこだわり: 単なる「ぐるぐる」だけでなく、スケルトンスクリーン（061.解説）など、サービスの世界観に合ったインジケーターを用意すると、ぐっと完成度が上がります。

沈黙を、期待に変える。hx-indicator を使って、サーバーが頑張っている裏側の時間を、ユーザーをワクワクさせる「おもてなし」の時間へと変えてください。次の記事では、更新後のスムーズな視線移動を支える「フォーカス管理（094. Focus Management）」をご紹介します。