How use setTimeout() for a loading state in React using hooks?

Question

I have an app that fetches data from an api. Whilst fetching there is a loading state that displays an icon to the screen. However this is a quick flash. I would like to display the loading icon on screen for a 2 seconds to improve UI and let the user know something is happening.

Here is my code:

 const [info, setInfo] = useState({});
 const [loading, setLoading] = useState(false);

useEffect(() => {
    setLoading(true);
    axios
      .get(`https://restcountries.eu/rest/v2/alpha/${code}`)
      .then((response) => {
        console.log(response);
        setInfo(response.data);
        setLoading(false);
      });

  }, []);

 return (
    <div>
      <Link to='/'>
        <button>Back</button>
      </Link>
      {loading ? (
        <LoadingIcon />
      ) : (
        <CountryInfo
          info={info}
          borders={borders}
          languages={languages}
          currencies={currencies}
        />
      )}
    </div>
  );
};

Amit Chauhan · Accepted Answer · 2020-01-28 05:03:14Z

3

you can use promise.all

So even if your request comes early your loading will be shown for at least 2 seconds.

setLoading(true);
const fetchPromise = axios
  .get(`https://restcountries.eu/rest/v2/alpha/${code}`);
const timeOutPromise = new Promise(resolve => {
  setTimeout(resolve, 2000);
})

Promise.all([fetchPromise, timeOutPromise]).then(([response]) => {
  console.log(response);
  setInfo(response.data);
  setLoading(false);
})

edited Jan 28, 2020 at 5:03

answered Jan 27, 2020 at 5:09

Amit Chauhan

7,0192 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DGB Over a year ago

I tried this and it gives the following error. Unhandled Rejection (TypeError): object is not iterable (cannot read property Symbol(Symbol.iterator))

Amit Chauhan Over a year ago

@DGB my bad! it should be [fetchPromise, timeOutPromise].

kooskoos · Accepted Answer · 2020-01-27 05:07:14Z

0

api call is async as soon as the data loads the loading us set to false so you only see it for a second.

Alternatively you can also do this.

{Object.entries(info).length === 0 && info.constructor === Object ? (
        <LoadingIcon />
      ) : (
        <CountryInfo
          info={info}
          borders={borders}
          languages={languages}
          currencies={currencies}
        />

answered Jan 27, 2020 at 5:07

kooskoos

4,9391 gold badge17 silver badges31 bronze badges

Comments

pumbo · Accepted Answer · 2020-01-27 05:10:25Z

0

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

    const request = axios
      .get(`https://restcountries.eu/rest/v2/alpha/${code}`);

    const timer = new Promise(resolve => setTimeout(resolve, 2000));

    return Promise.all([request, timer]).then(([response]) => {
      console.log(response);
      setInfo(response.data);
      setLoading(false);
    });    
  }, []);

answered Jan 27, 2020 at 5:10

pumbo

3,9162 gold badges29 silver badges29 bronze badges

Comments

Riley Hemphill · Accepted Answer · 2020-01-27 05:10:50Z

0

Just add setTimeout(()=>setLoading(false),2000) in the axios callback. Note this will add an additional 2 seconds to the load time, so be sure to adjust accordingly.

edited Jan 27, 2020 at 5:10

answered Jan 27, 2020 at 5:09

Riley Hemphill

1465 bronze badges

2 Comments

Amit Chauhan Over a year ago

problem with this code is even if server takes more time loader will be shown for extra 2 seconds.

Riley Hemphill Over a year ago

He mentioned it was just flashing so I doubt the latency will fluctuate that much. No need to overcomplicate.

RIYAJ KHAN · Accepted Answer · 2020-01-27 05:52:16Z

0

add setTimeout in success callback.

useEffect(() => {
    setLoading(true);
    axios
      .get(`https://restcountries.eu/rest/v2/alpha/${code}`)
      .then((response) => {
        console.log(response);
        setTimeout(function(){
            setInfo(response.data);
            setLoading(false);
        },2000)
      });

  }, []);

answered Jan 27, 2020 at 5:52

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

2 Comments

DGB Over a year ago

This worked, however could you explain something to me? Does this wait 2000 milliseconds before setInfo? I'm asking because I wonder if there would be any issues with this. Thanks.

RIYAJ KHAN Over a year ago

@DGB yes, it will wait till 2000 ms

Collectives™ on Stack Overflow

How use setTimeout() for a loading state in React using hooks?

5 Answers 5

2 Comments

Comments

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related