ReactのuseStateフックを使ってローディングを表示します。

ローディング状態の初期化

初期状態はtrueとします。

import React, { useState } from "react";

function sample() {
  const [loading, setLoading] = useState(true);
}

読み込みが終わったらローディング状態を解除

データの取得が完了した後、setLoading(false)にしてローディング状態を解除します。

import React, { useState, useEffect } from "react";
import axios from "axios";

function sample() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("https://api.example.com/data");
        setData(response.data);
        setLoading(false); // データの取得が完了したらローディング解除
      } catch (error) {
        console.error("Error fetching data:", error);
        setLoading(false); // エラーの場合もローディング解除
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

上記の例では、読み込み中に"Loading..."というテキストを表示できます。データの取得が完了したら、loadingがfalseになり、ページが表示されます。