How to add loading Spinner when first time loaded the website

Question

I'm using React. New in React and nodejs.

My application takes a few times before it loads the component and that time is spent in loading resources and validating the user. In this time only displayed that component which don't need to load data from the server.

I want to set a loading spinner until the resources loading is not complete. I want to do same thing when I delete a data or update a data.

Here is my data Loading Component.

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]);

response of the request is:

{
    "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": {}
}

In Server side I am using expressjs. Data are loaded from local server. And all data are for testing purpose.

Answer 1

first, you create a loading component, there you put a loading element, you may use bootstrap loading component

after that in your products component write, if(products.length===0){ return <Loading></Loading> }

while loading all products.