ローディング画面を表示する

投稿日: 2025-05-11

カテゴリ: tech

ブラウザで見ていると、リンクをクリックしてからロードが走るまで少し間があるように思って聞いたら、

プリフェッチの有効化
ローディング状態の表示:
データのキャッシュ戦略の最適化

ができるという。

とりあえず「全部反映して」と指示したら、エラー出て見れなくなった。

元に戻して、1 はデフォルトで有効ぽいし、2 のローディング状態の表示だけ反映依頼した。

はい、ローディング状態の表示だけを実装してみましょう。Next.js 13以降では、ローディング状態を表示するためにloading.tsxファイルを作成するのが推奨される方法です。

まず、ローディングコンポーネントを作成します：

export default function Loading() {
  return (
    <div className="max-w-3xl mx-auto px-4 py-10">
      <div className="mb-8">
        <div className="h-8 w-32 bg-gray-200 animate-pulse rounded"></div>
      </div>
      
      <div className="h-10 w-3/4 bg-gray-200 animate-pulse rounded mb-4"></div>
      
      <div className="flex gap-4 mb-6">
        <div className="h-5 w-32 bg-gray-200 animate-pulse rounded"></div>
        <div className="h-5 w-32 bg-gray-200 animate-pulse rounded"></div>
      </div>
      
      <div className="w-full h-[450px] bg-gray-200 animate-pulse rounded-lg mb-20"></div>
      
      <div className="space-y-4">
        <div className="h-4 w-full bg-gray-200 animate-pulse rounded"></div>
        <div className="h-4 w-5/6 bg-gray-200 animate-pulse rounded"></div>
        <div className="h-4 w-4/6 bg-gray-200 animate-pulse rounded"></div>
      </div>
    </div>
  );
}

この実装では：

loading.tsxファイルを作成し、ページのローディング状態を表示するコンポーネントを定義しました
スケルトンUIを使用して、実際のコンテンツの形状に近いローディング表示を実装
animate-pulseアニメーションを使用して、ローディング中であることを視覚的に表現

このローディングコンポーネントは、ページの読み込み中に自動的に表示されます。Next.jsの機能により、ページ遷移時やデータフェッチ中に自動的にこのローディング状態が表示されます。

できた。