How can show a loading spinner whilst the data is loading to fetch.
const [user, loading, error] = useAuthState(auth);
const navigate = useNavigate()
const [bikes] = useBikes()
if (loading) {
return <Loading></Loading>
}
fetch(`http://localhost:5000/bike/${id}`, {
method: 'DELETE'
})
.then(res => res.json())
.then(data => {
console.log(data)
alert('One Item Deleted')
});
If you have the spinner under the id spinner here's a minimalistic example on how you can do so. just wrap the fetch inside a function.
function delitem(){
document.getElementByID("spinner").style.display = "block"
fetch(`http://localhost:5000/bike/${id}`, {
method: 'DELETE'
})
.then(res => res.json())
.then(data => {
console.log(data)
alert('One Item Deleted')
document.getElementByID("spinner").style.display = "none"
});
}Put your fetch API inside the useEffect, so you can easily implement your spinner functionality
const [isLoading,setIsLoading]=useState(false);
useEffect(()=>{
setIsLoading(true);
fetch("some-url").then(res=>res.json())
.then(data=>{
setIsLoading(false)
console.log(data);
},[])
if(isLoading){
return <LoadingSpinner/>
}
return <div>..your data </div>