Spinner

いつ使うか

• データフェッチ中やページ遷移時に、処理が進行中であることをユーザーに伝えるときに使用する
• コンテンツの読み込み完了まで待機が必要なエリアに配置する
• message でユーザーに何が起きているかを補足できる

いつ使わないか

• ボタン内のローディング表示には使わない。ActionButton の loading prop を使用する
• ページ全体のスケルトン表示には使わない。Skeleton コンポーネント（未実装）を使用する

Usage

import { Spinner } from '@bi-shop-it/ui/spinner';

<Spinner />
<Spinner size="lg" message="データを読み込んでいます..." />

Props

サイズの使い分け

状態

デフォルト

<Spinner />

サイズ

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

メッセージ付き

message を指定すると、スピナーに補足テキストを表示する。layout で並び方向を切り替えられる。

{
  /* 縦並び（デフォルト） */
}
<Spinner message="データを読み込んでいます..." />;

{
  /* 横並び */
}
<Spinner layout="horizontal" message="データを読み込んでいます..." />;

色の継承

Spinner は currentColor を使用するため、親要素の color をそのまま継承する。

{/* 親要素の text color に応じてスピナーの色が変わる */}
<div className="text-primary">
  <Spinner />
</div>
<div className="text-destructive">
  <Spinner />
</div>

アクセシビリティ

コンポーネントが内部で処理すること

• コンテナに role="status" を付与し、スクリーンリーダーにライブリージョンとして通知する
• message がない場合は sr-only テキスト（「読み込み中」）でスクリーンリーダーに状態を伝える
• 回転アイコンは aria-hidden="true" で装飾として扱い、二重読み上げを防止する
• prefers-reduced-motion 設定を尊重し、モーション軽減時はアニメーションを停止する

利用者が対応すること

• message はユーザーにとって意味のあるテキストにすること（「読み込み中...」ではなく「注文履歴を読み込んでいます...」等）
• 長時間のローディングが予想される場合は、message で状況を伝えることを推奨する

関連コンポーネント

• ActionButton — ボタン内のローディング表示は loading prop を使用する