Issue

This Content is from Stack Overflow. Question asked by Nikita Kulikov

I have a page that is making a few heavy API calls when loading, it takes around 5-7 seconds to collect all the data. I referenced [this question] and decided to add a loader with setTimeout to simulate additional “API calls” and timed loading time with and without the loader.

Without the loader it took – 6.92 secs

With the loader it took – 14.05 secs

This is my code:

    const [loading, setLoading] = useState(false);

    useEffect(() => {
        async function updateUI() {
            const ethers_owner = await administrativeSidechainContract.owner()
            setContractOwner(() => {
                return {contractOwner: ethers_owner.toLowerCase()}})

            const ethers_matchCountMessage = await administrativeSidechainContract.matchCount()
            setMatchCount(() => {
                return {matchCount: ethers_matchCountMessage,}})
        }
        updateUI()
        //here is the loader simulation
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
        }, 7000);

    }, [])

    return (
        <>
            {loading ?
                <div className="loader-container"></div> :
                <div className="decks-container"></div>}
        </>
    )

From my testing it seems that the loader just increases the page loading time by whichever amount of setTimeout that I set.

How do make I make data loading time and setTimeout times overlap rather than go on top of each other?

Thanks for your time in advance!

Solution

No, it’s non-blocking by definition.

But, if you want to implement a loading logic, useEffect is definitely the right tool.

You just need to pass a second argument to it.

  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 1000);
  }, []);

This Question was asked in StackOverflow by user15084210 and Answered by Filipe Merker It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.