useLoadingIndicator の実践的な活用と注意点

Nuxt の useLoadingIndicator は、ページの読み込み状態を簡単に管理できる便利なコンポーザブルです。ユーザーに対して読み込み中であることを視覚的に示すことで、UX（ユーザーエクスペリエンス）を向上させることができます。特に SPA や SSR を組み合わせたアプリケーションで、ページ遷移や非同期処理の進捗を適切に伝えたい場合に役立ちます。

本記事では、useLoadingIndicator の基本的な使い方だけでなく、実務での活用例や注意すべきポイントを詳しく解説します。これにより、Nuxt アプリケーションの読み込み体験をより洗練されたものにできるでしょう。

まず結論：useLoadingIndicator のポイント

• ページの読み込み状態（isLoading）や進捗（progress）をリアクティブに管理できる
• 読み込み開始・進捗更新・完了をメソッドで制御可能（start(), set(), finish()）
• 読み込みバーの表示時間やスロットルをカスタマイズできる
• エラー状態の表示もサポート（finish({ error: true })）
• Nuxt のページ遷移イベントにフックして自動制御も可能

いつ使うべきか？ 使わない方がよいケースは？

使うべきケース

• ページ遷移時や非同期データ取得時にユーザーに読み込み状況を明示したいとき
• 複数の非同期処理の進捗を統合して表示したい場合
• カスタムの読み込みバーやローディングUIを実装したいとき
• エラー発生時に読み込みバーの色を変えて視覚的に知らせたい場合

使わない方がよいケース

• 読み込み状態を単純に boolean で管理し、進捗表示が不要な場合（useLoadingIndicator は進捗管理がメイン）
• 読み込みUIを独自に完全カスタマイズしていて、Nuxt の読み込みバーを使わない場合
• 読み込み状態が非常に短時間で終わるため、表示が逆にUXを損なう場合（過剰なローディング表示は避ける）

実務でよくあるユースケースとサンプルコード

1. ページ遷移時の読み込みバー制御

Nuxt のページ遷移イベントに連動して、読み込みバーを自動的に表示・非表示にする例です。

import { useLoadingIndicator } from '#app'

const { start, finish } = useLoadingIndicator()

// ページ遷移開始時に読み込みバーを表示
useRouter().beforeEach(() => {
  start()
})

// ページ遷移完了時に読み込みバーを終了
useRouter().afterEach(() => {
  finish()
})

このようにすると、ユーザーはページ遷移の進捗を視覚的に把握でき、待ち時間のストレスを軽減できます。

2. API 呼び出しなど非同期処理の進捗表示

API からのデータ取得中に読み込みバーを表示し、完了後に消す例です。

import { useLoadingIndicator } from '#app'
import { ref } from 'vue'

const { start, finish } = useLoadingIndicator()
const data = ref(null)

async function fetchData() {
  start()
  try {
    const res = await fetch('/api/data')
    data.value = await res.json()
  } catch (e) {
    finish({ error: true })
    return
  }
  finish()
}

fetchData()

API 呼び出しの成功・失敗に応じて読み込みバーの色を変えられるため、ユーザーに状態をわかりやすく伝えられます。

3. カスタム進捗計算による読み込みバーの動き調整

estimatedProgress オプションを使い、進捗の増加速度を調整する例です。

import { useLoadingIndicator } from '#app'

const { progress, start, finish } = useLoadingIndicator({
  duration: 3000,
  estimatedProgress: (duration, elapsed) => {
    // 緩やかに進み、最後に急激に100%に近づく動き
    return Math.min(100, (elapsed / duration) ** 2 * 100)
  }
})

start()

setTimeout(() => {
  finish()
}, 3000)

このように進捗の動きをカスタマイズすることで、ユーザーに自然な読み込み感を与えられます。

よくある落とし穴・注意点

SSR と Hydration の影響

useLoadingIndicator はクライアントサイドでの読み込み状態管理が主な用途です。サーバーサイドレンダリング（SSR）時には読み込みバーは表示されません。Hydration（サーバーからクライアントへの状態引き継ぎ）時に読み込み状態が不整合になると、UIのちらつきや不自然な表示が起こることがあります。

過剰な読み込み表示は UX を損なう

読み込みバーを頻繁に表示・非表示すると、ユーザーにとって逆にストレスになる場合があります。特に短時間の処理で読み込みバーがチカチカするのは避けましょう。throttle オプションで表示のスロットルを調整し、一定時間以上の読み込み時のみ表示する工夫が必要です。

パフォーマンスへの影響

useLoadingIndicator は内部でタイマーやインターバルを使って進捗を管理します。大量に使いすぎるとパフォーマンスに影響が出る可能性があるため、必要な箇所だけで使うことを推奨します。

まとめ

useLoadingIndicator は Nuxt アプリケーションで読み込み状態を直感的に管理し、ユーザーにわかりやすく進捗を伝えるための強力なツールです。ページ遷移や非同期処理の読み込み表示に最適で、カスタマイズ性も高いのが特徴です。

ただし、SSR や Hydration の特性を理解し、過剰な表示を避けるなどの注意も必要です。実務ではページ遷移連動や API 呼び出し時の読み込み表示に活用し、ユーザー体験の向上に役立ててください。