I'm using the embed iframe from Spotify to show the top tracks of artists in my app:

https://repotify.netlify.app/

When the search is pending a loading spinner is shown until resolved and the same thing happens when the top tracks are being fetched and pending.

But when I render the iframe of each top 10 tracks they start to load and show the box-shadow on page before fully loading:

This is the code for that component:

const TopTracks = ({ track }) => {
  return (
    <div>
      <iframe
        src={`https://open.spotify.com/embed/track/${track.id}`}
        title={track.name}
        width="300"
        height="80"
        allowtransparency="true"
        allow="encrypted-media"
        className="tracks"
      ></iframe>
    </div>
  );
};

export default TopTracks;

What I would like to happen is for the iframes to load completely and then show all at once and while loading, show a spinner like the rest of fetch requests:

This is the functionality for the trackList which maps over the tracks and gets the IDs for each:

// Imports

const TrackList = () => {
  const artistTopTracks = useSelector(selectArtistTopTracks);
  const topTracksIsLoading = useSelector(selectTopTracksIsLoading);
  const topTracksHasError = useSelector(selectTopTracksHasError);
  const searchIsLoading = useSelector(selectSearchIsLoading);
  const searchHasError = useSelector(selectSearchHasError);

  if (topTracksIsLoading || searchIsLoading) return <IsLoading />;
  if (topTracksHasError || searchHasError) return <HasError />;

  return (
    <div>
      {!artistTopTracks
        ? ""
        : artistTopTracks.map((track) => (
            <TopTracks key={track.id} track={track} />
          ))}
    </div>
  );
};

export default TrackList;

Is there a way I can show the loading spinner until all the iframes are loaded?

If not, is there a way to at least not show that shadow-box of each when they're rendering individually?