We have a component which performs a map loop to create a list of components.
This list of components has some expensive calculations in there thus takes a while to create.
Trying to show a loading component while this map completes creating all the components.
Its not like I am making some async call to fetch data here to wait for it and show/hide loader.
It’s just the component taking time to create and looking to show a loader while it creates the list of components.
How could I show this loader, how to wait for the mapping to complete? Tried to play around with wrapping it inside a Promise.all
but it complains that that is not a valid jsx
.
import React from 'react';
const Main = ({items}) => {
const [isLoading, setIsLoading] = useState(true);
/*
// can't do this. It would become an infinite spinner
if (isLoading) return <Loading />
*/
return (
<div>
<Component1 />
<Component2 />
<div>
{/* wait for this mapping to complete. Show a loader whiile it loads. setIsLoading(false) once done */}
{items.map((item, i) => (<ExpensiveComponent/>))}
</div>
<Component3 />
<Component4 />
</div>
);
};
export default Main;