Quiero mostrar un cargador en la pantalla hasta que iframe cargue por completo el contenido de Api. Estoy llamando a la API de Spotify para mostrar la lista de reproducción.
estoy haciendo de esta manera
//loader import { RotatingLines } from 'react-loader-spinner'; //state const [loadedlist, setloadedlist] = useState(true); //component return ( <> {/* List Layout using spotify's embed */} {listLayout && ( <div> {loadedlist ? <RotatingLines width="100" strokeColor="#FF5733" /> : <div className="container"> <iframe className="embedded_spotify_playlist" title="Spotify Playlist" onLoad={setloadedlist(false)} src={`https://open.spotify.com/embed/playlist/${playlistId}?utm_source=generator`} width="100%" height="500" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" /> </div> } </div> )} )Actualmente, puedo mostrar el cargador inicialmente, pero parece que la carga no funciona, el cargador no desaparece/cierra incluso si se carga el contenido en iframe
¿Cómo puedo hacer esto?
Entonces, hice algo como esto en sandbox y parece funcionar:
//state const [loadedlist, setLoadedlist] = useState(false); return ( <> {!loadedlist && <RotatingLines width="100" strokeColor="#FF5733" />} <div> <div className="container"> <iframe className="embedded_spotify_playlist" title="Spotify Playlist" onLoad={() => setLoadedlist(true)} src={`https://open.spotify.com/embed/playlist/37i9dQZF1DWVuV87wUBNwc?utm_source=generator`} width="100%" height="500" frameBorder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" /> </div> </div> </>)Creo que es el mismo problema que se describe aquí: ¿Por qué necesito pasar una función anónima al evento onClick?
Para una respuesta más detallada, puede consultar aquí