104. Spinners & Skeletons（スピナーとスケルトン表示：ページが「育つ」様子を予感させる）

原理：読み込み中の「寂しさ」を埋める

「何もない」不安を、情報の「抜け殻」で埋める

ページを開いた瞬間、真っ白な画面が続くのはよくありません。でも、まだデータが揃っていない……。そんな時に役立つのが、モダンなWebアプリ（SNSやダッシュボード）でよく見かける「スケルトンスクリーン」と、伝統的な「スピナー（ぐるぐる）」です。

スピナー (Spinners): 「今、後ろでプログラムが回っていますよ」という活動の証。
スケルトン (Skeletons): 「もうすぐここに、こんな形の情報が入りますよ」という未来の予報。

これらを使い分けることで、ユーザーに「待たされている」という感覚を、「もうすぐ見えるぞ」という期待感に変えることができます。

実践：期待感を高める読み込み画面のデザイン

1. 伝統的なスピナーの配置

小さなパーツや、時間が短い処理には、馴染みのあるスピナーが最適です。

<button hx-get="/api/load" hx-indicator="#loading-spinner">
    データを読み込む
</button>

<div id="loading-spinner" class="htmx-indicator">
    <div class="loader"></div> <!-- CSSでぐるぐる回るアニメーション -->
</div>

2. モダンなスケルトン表示

ページ全体や大きなカード要素をロードするとき、あらかじめ「グレーの枠線」だけを出しておく洗練された手法です。

<!-- 
  最初はスケルトン（中身が空のグレーの箱）を表示しておき、
  hx-trigger="load" で本物のデータを取ってくる
-->
<div hx-get="/api/user-profile" hx-trigger="load" hx-swap="outerHTML">
    <div class="skeleton-card">
        <div class="skeleton-avatar"></div>
        <div class="skeleton-line"></div>
        <div class="skeleton-line short"></div>
    </div>
</div>

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

スピナーの用意: .loader などのクラスを作り、CSSの animation: rotate 1s infinite などで動かします。
スケルトンの用意: 本物のコンテンツと「同じ形」の、グレーの背景色の要素を作ります。少し光が流れるようなアニメーション（Shimmer効果）を付けるとさらにプロっぽくなります。
HTMXで入れ替える: hx-indicator や hx-swap="outerHTML" を使って、これら「仮の姿」を「本当の姿」へとガッチャンコと入れ替えます。

比較：どっちを使うべき？

スピナー（Spinners）

メリット: 実装が非常に簡単。
デメリット: 画面が閑散として見え、待ち時間が体感的に長く感じやすい。
用途: ボタンの横、小さなステータス更新。

スケルトン（Skeletons）

メリット: 「何が来るか」が分かるので、不安が少ない。画面が豪華に見える。
デメリット: 実装（CSS）が少し大変。
用途: 記事一覧、プロフィール画面、ダッシュボード。

まとめ：初心者のための「予感」の作り方

スピナーとスケルトンを使いこなすと、あなたのWebアプリは「一足早く完成している」ような、驚きの軽快さを手に入れます。

0.5秒の法則: 非常に短い通信ならスピナー。少しでも「重いな」と感じるページなら、迷わずスケルトン。
アニメーションは「左から右へ」: スケルトンの背景を左から右へキラキラと流すと、人間の目は「読み込みが順調だな」と知覚しやすくなります。
レイアウトの維持: スケルトンのサイズを、本物のコンテンツとぴったと同じにしておきましょう。データが届いた瞬間に画面が「ガクッ」と動くのを防ぐのが、プロの最低限のマナーです。

空白を、期待に塗り替える。htmx-indicator や load トリガーを駆使して、ユーザーがページを開いたその瞬間から「情報の到着」を楽しめる、最高にモダンなWeb体験を演出してください。次の記事では、操作をやり直せる道を作る「確認とキャンセルの論理（105. Confirm/Cancel Logic）」をご紹介します。