react lazy load image component

image.js

// Image.js

import React from "react";
import LazyLoad from "react-lazyload";

export default class Image extends React.PureComponent {
    state = {
        loaded: false
    };

    onLoad = () => {
        this.setState({loaded: true});
    };

    render() {
        const {loaded} = this.state;
        const {className, ...props} = this.props;
        const loadingClassName = loaded ? "" : "image-loading";
        const placeholder = (
            <div className={`${loadingClassName} ${className}`} />
        );

        return (
            <LazyLoad once placeholder={placeholder}>
                <img
                    {...props}
                    onLoad={this.onLoad}
                    className={`${loadingClassName} ${className}`}
                />
            </LazyLoad>
        );
    }
}