I'm getting my data at very slow rate so when i open my website first time it takes some times untile showing all the product. So i want to add a loader untile my data is fully loaded.
i used custom Hook to load data
One way of doing this, that I like, and is very straight forward is by adding conditional statements, meaning that if the data passed as a prop is currently undefined return <div>Loading.....</div> in opposite case return the JSX containing the prop data.
If you don't do this, React will show an error. This is because when fetching there is a time that the data is undefined and if React tries to do something with it before hand, it finds nothing. This conditions are a way to tell React when is a good time to access the data.
export default function MyComponent({someData}){
if(!someData) return <div>Loading.....</div>
else{
return <div>{someData}</div>
}
}