Loading spinner while fetching an api in react app not showing

Question

When the website loads for the first time the fetched data from an api don't show.But after one reload the products are shown . Tried to use a loading spinner while loading the data. The spinner won't show either. How can I show the the loaded data on the first time and while loading the products the Loading spinner will be shown.

const [isLoading, setIsLoading] = useState(false);


 useEffect(() => {
setIsLoading(true);

fetch(" https://hidden-citadel-3557.herokuapp.com/inventory")
  .then((res) => res.json())
  .then((data) => setInventories(data));
setIsLoading(false );  }, []); `
  if (isLoading) {
return <Loading></Loading>  }

Answer 1

Move "setIsLoading(false)" to the second ".then", like this:

const [isLoading, setIsLoading] = useState(false);


 useEffect(() => {
   setIsLoading(true);

fetch(" https://hidden-citadel-3557.herokuapp.com/inventory")
  .then((res) => res.json())
  .then((data) => {
     setIsLoading(false);
     setInventories(data)
   });
 }, []); 

  if (isLoading) {
return <Loading></Loading>  }

Answer 2

Based on your code, your approach is not a very viable one.

Here's what I would do.

1. Use a separate function for loading the data.

function loadData()
{
   setLoading(true);
   fetch(" https://hidden-citadel-3557.herokuapp.com/inventory")
     .then((res) => res.json())
     .then((data) => {
        setInventories(data);
        setLoading(false);
     });
}

2. Then perform your effect:

 useEffect(loadData,[]);

3. In your jsx, use the loading variable to render <loading> element based on loading state varibale value:

{ loading ? <loading></loading> : ""}

Answer 3

This works for me:

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

const Index = () => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(
        "https://627a5a9773bad50685876437.mockapi.io/users"
      );
      await response.json();
      setIsLoading(false);
    };
    fetchData();
  }, []);

  return isLoading ? <p>Loading</p> : <p>Loaded!</p>;
};

export default Index;