Reactで読み込み中にローディングの処理を入れる方法

Reactで読み込み中にローディングの処理を入れる方法

Reactで読み込み中にローディングの処理を入れるには、useState と useEffect を使ってローディングの状態を管理する方法があります。
以下にTypeScriptを使用した例を示します。

この例では、データの読み込みが完了するまでスピナーを表示し、読み込みが完了するとデータを表示します。

import React, { useState, useEffect } from 'react';
import styles from './LoadingExample.module.scss'; // module.scss を使用

const LoadingExample: React.FC = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('データの取得に失敗しました');
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  if (isLoading) {
    return <div className={styles.spinner}>読み込み中...</div>;
  }

  if (error) {
    return <div className={styles.error}>{error}</div>;
  }

  return (
    <div className={styles.content}>
      <h1>データの内容</h1>
      <p>{data}</p>
    </div>
  );
};

export default LoadingExample;

そして、LoadingExample.module.scss には、スピナーとエラーメッセージ、データ表示用のスタイルを追加します。

.spinner {
  font-size: 20px;
  text-align: center;
  margin-top: 50px;
}

.error {
  color: red;
  font-size: 18px;
  text-align: center;
  margin-top: 50px;
}

.content {
  text-align: center;
  margin-top: 50px;
}

この例では、データの取得が完了するまで「読み込み中...」というメッセージを表示し、エラーが発生した場合にはエラーメッセージを表示します。
データが正常に取得できた場合はその内容を表示します。