Как добавить загрузку Spinner при первой загрузке сайта

Я использую Реакт. Новое в React и nodejs.

Моему приложению требуется несколько раз, прежде чем он загрузит компонент, и это время тратится на загрузку ресурсов и проверку пользователя. В это время отображается только тот компонент, которому не нужно загружать данные с сервера.

Я хочу установить счетчик загрузки до тех пор, пока загрузка ресурсов не будет завершена. Я хочу сделать то же самое, когда удаляю данные или обновляю данные.

Вот мой компонент загрузки данных.

const useBook = (path, value) => {
  const [products, setProducts] = useState([]);
  const [product, setProduct] = useState({});
  const [state, setState] = useState(false);
  useEffect(() => {
    const query = `${path}/${value} `;
    const url = `http://localhost:5000/book/${path ? query : ""}`;
    (async () => {
      await axios.get(url).then((res) => {
        // setProducts(res.data.result);
        if (path !== "id") {
          setProducts(res.data.result);
        } else {
          setProduct(res.data);
        }
      });
    })();
  }, [path, state, value]);

ответ на запрос:

{
    "data": {
        "result": [
            {
                "_id": "626cf32c0c39af8566524692",
                "name": "Enjoy Your Life",
                "description": "Short Description",
                "price": 220,
                "quantity": 28,
                "supplier": "Maktabatul Azhar",
                "image": "https://images-na.ssl-images-amazon.com/images/I/61mkMeByEJL.jpg"
            },
            {
                "_id": "626cfcb26940e72778e26201",
                "name": "Dont't Be Sad",
                "description": "Short Description",
                "price": 300,
                "quantity": 90,
                "supplier": "Maktabatul Asraf",
                "image": "https://dar-us-salam.com/2063-large_default/rp13-don-t-be-sad-hb.jpg"
            },
            {
                "_id": "626cfcd56940e72778e26202",
                "name": "Dont't Be Sad",
                "description": "Short Description",
                "price": 250,
                "quantity": 100,
                "supplier": "Maktabatul Asraf",
                "image": "https://dar-us-salam.com/2063-large_default/rp13-don-t-be-sad-hb.jpg"
            },
            {
                "_id": "626cfcef6940e72778e26203",
                "name": "La Tahjan",
                "description": "Short Description",
                "price": 320,
                "quantity": 20,
                "supplier": "Maktabatul Asraf",
                "image": "https://dar-us-salam.com/2063-large_default/rp13-don-t-be-sad-hb.jpg"
            },
            {
                "_id": "626cfd396940e72778e26204",
                "name": "Hotash Hoben Na",
                "description": "Short Description",
                "price": 400,
                "quantity": 50,
                "supplier": "Hudhud",
                "image": "https://dar-us-salam.com/2063-large_default/rp13-don-t-be-sad-hb.jpg"
            },
            {
                "_id": "626cfde06940e72778e26205",
                "name": "Don't Be Angry",
                "description": "Short Description",
                "price": 160,
                "quantity": 0,
                "supplier": "Kalantor",
                "image": "https://www.kalantorprokashoni.com/wp-content/uploads/2017/06/Rag-Korben-Na-01.jpg"
            }
        ]
    },
    "status": 200,
    "statusText": "OK",
    "headers": {
        "content-length": "1367",
        "content-type": "application/json; charset=utf-8"
    },
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {
            "FormData": null
        },
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "http://localhost:5000/book/limit/6 "
    },
    "request": {}
}

На стороне сервера я использую expressjs. Данные загружаются с локального сервера. И все данные для целей тестирования.