Wait for Image Loaded
From this article by Josh Comeau, a method to wait for an image to load before rendering animations (or other things).
function ShapeLayer() {
const [hasLoaded, setHasLoaded] = React.useState(false);
React.useEffect(() => {
const img = new Image();
img.src = "/images/shape-sprite.png";
img.onload = () => {
setHasLoaded(true);
};
}, []);
if (!hasLoaded) {
return null;
}
// Once `hasLoaded` is true, render all of the shapes...
}