Estoy usando el iframe incrustado de Spotify para mostrar las mejores canciones de los artistas en mi aplicación:

https://repotify.netlify.app/

Cuando la búsqueda está pending , se muestra un indicador de carga hasta que se resuelva y sucede lo mismo cuando se recuperan las pistas principales y están pending .

Pero cuando renderizo el iframe de cada una de las 10 pistas principales, comienzan a cargarse y muestran la sombra del cuadro en la página antes de cargarse por completo:

Este es el código para ese componente:

 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;

Lo que me gustaría que sucediera es que los iframes se carguen por completo y luego se muestren todos a la vez y, mientras se cargan, muestren un control giratorio como el resto de las solicitudes de recuperación:

Esta es la funcionalidad de trackList que mapea las pistas y obtiene los ID de cada una:

 // 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;

¿Hay alguna manera de que pueda mostrar la rueda de carga hasta que se carguen todos los iframes?

Si no, ¿hay alguna manera de al menos no mostrar ese cuadro de sombra de cada uno cuando se renderizan individualmente?