Loading Indicator

image.css

/* CSS */

.image{
  width: 250px;
  height: 250px;
  display: block;
}

.image-loading {
  position: static;
  overflow: hidden;
  animation: placeholderShimmer 2s linear;
  animation-iteration-count: infinite;
  background-color: #ffffff !important;
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.15) 15%,
      rgba(0, 0, 0, 0.08) 30%
  );
  background-size: 1200px 100%;
}

@keyframes placeholderShimmer {
  0% {
      background-position: -1200px 0;
  }
  100% {
      background-position: 1200px 0;
  }
}

/* source: https://semantic-ui.com/ */

image.js

// image.js

import React from "react";

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";

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

index.js

// index.js

<div className="gallery-container">
  <Image src="" className="image"/>
  <Image src="" className="image"/>
  <Image src="" className="image"/>
  <Image src="" className="image"/>
  <Image src="" className="image"/>
</div>