score:1

Accepted answer

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 />;
}

score: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


Related Query

More Query from same tag