Wait for component mapping to complete before proceeding

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;