import React, { ComponentType, useEffect, useState } from 'react'; import clsx from 'clsx'; import { SKIN_LIGHT } from 'app/components/ui'; import ComponentLoader from './ComponentLoader'; import styles from './imageLoader.scss'; interface Props { src: string; alt: string; ratio: number; // width:height ratio onLoad?: () => void; } const ImageLoader: ComponentType = ({ src, alt, ratio, onLoad = () => {} }) => { const [isLoading, setIsLoading] = useState(true); useEffect(() => { function preloadImage() { const img = new Image(); img.onload = () => { setIsLoading(false); onLoad(); }; img.onerror = preloadImage; img.src = src; } preloadImage(); }, [src]); return (
{isLoading && (
)}
{alt}
); }; export default ImageLoader;