I want to display a loader on screen until iframe fully loads the content from Api..I am calling spotify api to display playlist
I am doing this way
//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>
)}
)
Currently I am able to display loader initially but It seem onload is not working, the loader does not disappear/closes even the content in iframe is loaded
How can I do this?
So, I did something like this on sandbox and it seems to work :
//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>
</>)
I think it is the same problem as described here : Why do I need to pass an anonymous function into the onClick event?
For a more detailed answer, you can check here