accounts-frontend/packages/app/components/ui/loader/ImageLoader.tsx

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<Props> = ({ src, alt, ratio, onLoad = () => {} }) => {
    const [isLoading, setIsLoading] = useState<boolean>(true);

    useEffect(() => {
        function preloadImage() {
            const img = new Image();
            img.onload = () => {
                setIsLoading(false);
                onLoad();
            };
            img.onerror = preloadImage;
            img.src = src;
        }

        preloadImage();
    }, [src]);

    return (
        <div className={styles.container}>
            <div
                style={{
                    height: 0,
                    paddingBottom: `${ratio * 100}%`,
                }}
            />

            {isLoading && (
                <div className={styles.loader}>
                    <ComponentLoader skin={SKIN_LIGHT} />
                </div>
            )}

            <div
                className={clsx(styles.image, {
                    [styles.imageLoaded]: !isLoading,
                })}
            >
                <img src={src} alt={alt} />
            </div>
        </div>
    );
};

export default ImageLoader;