035. hx-indicator（通信中であることを伝える「ローダー」の表示）

原理：ユーザーの「待ち時間」を「納得感」に変える

止まっているのか、動いているのか

Webブラウザ上でボタンを押し、反応が返ってくるまでの数秒間。もし画面に何の変化もなかったら、ユーザーは「あれ、フリーズしたかな？」「ボタン、ちゃんと押せたかな？」と不安になり、何度もクリックしたり、ページを閉じたりしてしまいます。

この不安を解消するのが、「ローディング中（くるくる回るアイコンなど）」の表示です。「今、あなたの命令を聞いて、一生懸命サーバーと通信していますよ」というメッセージを視覚的に伝える。これこそが、快適なユーザー体験（UX）の基本です。

HTMXの hx-indicator（インジケーター）属性は、「通信が始まったら何かを表示し、通信が終わったら隠す」という一連の演出を、一行で自動化します。

「透明」の魔法を使う

HTMXのインジケーターの仕組みはとてもシンプルです。 1. あなたはあらかじめ、画面のどこかに「読み込み中...」という文字や画像を用意しておきます。 2. その要素にクラス htmx-indicator を付け、CSSで「普段は非表示（透明）」にしておきます。 3. 通信が始まると、HTMXが自動的にその要素に「表示」の指示を出し、終わると再び「非表示」に戻します。

実践：くるくる回るアイコンを設置する

1. シンプルなローディングメッセージ

ボタンの横に「送信中...」という文字を出す最も基本的な例です。

<style>
  /* HTMXの基本：インジケーターは最初は見えないようにしておく */
  .htmx-indicator {
      opacity: 0;
      transition: opacity 200ms ease-in;
  }
  /* 通信中（.htmx-request）だけ見えるようにする */
  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator {
      opacity: 1;
  }
</style>

<button hx-post="/api/save" hx-indicator="#loading-spinner">
    保存する
</button>

<!-- 通信中だけフワッと現れるメッセージ -->
<span id="loading-spinner" class="htmx-indicator">
    ⏳ 通信中...
</span>

2. 自分自身の見た目を変える

ボタンそのものの中にインジケーターを仕込む、洗練された手法です。

<button hx-post="/api/save" hx-indicator="this">
    <img src="/spinner.gif" class="htmx-indicator"> 決定
</button>

※ hx_indicator="this" により、ボタン自体に htmx-request クラスが付与されるため、中の画像が表示されます。

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

ローダーの準備: 好きな画像、GIFアニメ、またはテキストをHTMLで書き、クラス htmx-indicator を付けます。
ターゲットの指定: ボタンなどの要因要素に hx-indicator="#その場所" と書きます。
CSSの魔法: 上記のサンプルコードにある「透明度（opacity）」を操るCSSを1回だけサイト全体に書いておけば、すべてのインジケーターがプロ顔負けの動きになります。

比較：手動JSによるローダー制御 vs hx-indicator

JavaScriptでの「くるくる」表示

const loader = document.getElementById('loader');
const btn = document.getElementById('save-btn');

btn.addEventListener('click', async () => {
    loader.style.display = 'block'; // 見せる
    try {
        await fetch('/save');
    } finally {
        loader.style.display = 'none'; // 隠す
    }
});

「もし通信が0.1秒で終わっちゃったら、一瞬だけ表示されてチカチカして見苦しいな……」といった、細かい配慮をJSで書くのは至難の業です。

HTMXの hx-indicator

<button hx-indicator="#loader">

HTMXは通信の状態を完璧に監視しており、適切なタイミングでクラスを付け外ししてくれます。さらにCSSの transition を使えば、心地よいアニメーションも自由自在です。

まとめ：初心者のための「おもてなし」の心

hx-indicator は、あなたのWebアプリに「命の鼓動」を感じさせる、大切なおもてなしの属性です。

ユーザーを一人にしない: 通信中の数秒間も、ローダーを見せることで「一緒に頑張っています」と伝えましょう。
CSSを味方に: display: none で消すよりも、opacity: 0 で薄くしておく方が、ふわっと現れて消える高級感を出しやすくなります。
連打防止とセットで: 前回の hx-disabled-elt（連打防止）と組み合わせれば、最強の「安心セット」が出来上がります。

待たせている理由を、言葉ではなく姿で見せる。hx-indicator という舞台装置を使って、ユーザーが心地よく「待てる」Webアプリを演出してください。次の記事では、ブラウザの「戻る」ボタンとの付き合い方を決める hx-history（036. hx-history）から、歴史を刻む技術の世界へ踏み出しましょう。