How to display a spinner when data is loading from server by fetch api in REACT JS?

Question

I am developing a React app where I have to load data from the server on the home page. It takes a small amount of time when loading data from the server. I want to display a spinner when the fetch api is called. I already created a spinner component, but I don't know how to display that spinner when the fetch api is triggered.

const [product,setProduct]=useState({});
useEffect(()=>{
    fetch(`http://localhost:5000/readSingleCarsData/${id}`)
    .then(res=>res.json())
    .then(data=> {
        setProduct(data)
        setQuantity(data.quantity)
    });
},[])

use lazy load and suspense here.

Shah Vipul
– Shah Vipul

2022-05-08 07:11:40 +00:00
Commented May 8, 2022 at 7:11 — Shah Vipul
– Shah Vipul, Commented May 8, 2022 at 7:11

John Detlefs · Accepted Answer · 2022-05-08 07:11:08Z

5

Control your loader state with hooks and use .finally() to convert your loading state back to false.

import { useEffect, useState } from 'react';

export default function Home() {
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        setLoading(true);
        fetch('/api/hello')
            .then((res) => res.json())
            .then((data) => {
                // do something with data
            })
            .catch((err) => {
                console.log(err);
            })
            .finally(() => {
                setLoading(false);
            });
    }, []);

    if (loading) {
        return <LoadingComponent />;
    }

    return <MyRegularComponent />;
}

answered May 8, 2022 at 7:11

John Detlefs

1,0371 gold badge9 silver badges17 bronze badges

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

1 Comment

AmehPls Over a year ago

Should the default/initial value for loading be true instead of false?

Woadud Akand · Accepted Answer · 2022-05-08 07:08:47Z

1

const [product,setProduct]=useState({})
const [isLoading, setLoading]=useState(false);

useEffect(()=>{
    setLoading(true);
    fetch(`http://localhost:5000/readSingleCarsData/${id}`)
    .then(res=>res.json())
    .then(data=> {
        setProduct(data)
        setQuantity(data.quantity)
        setLoading(false);
    });
},[]);

return isLoading ? <Spiner /> : <Component />

Try this

answered May 8, 2022 at 7:08

Woadud Akand

7481 gold badge6 silver badges14 bronze badges

3 Comments

John Detlefs Over a year ago

Looks good, but if you get an error, your loading will always stay as true. Better to use .finally() after everything is all done and dusted.

Woadud Akand Over a year ago

On catch block also setLoading(false);

John Detlefs Over a year ago

Both work, for sure, although potentially an unnecessary duplication? DRY and all that... 👍

Collectives™ on Stack Overflow

How to display a spinner when data is loading from server by fetch api in REACT JS?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related