Image loader component

ImageCard.jsx

import React, { Component, Fragment } from "react";
import ImageLoader from "../ContentLoaders/ImageLoader";

class ImageCard extends Component {
  state = {
    loadedErrorMessage: '',
    imageUrl: '',
    imageLoaded: false,
    imageLoadError: false,
  };

  renderLoaderAndSilentImage(data) {
    const { image, size } = data;
    const { imageLoaded, imageLoadError } = this.state;

    /* Render the skeleton loader and hidden image loaded silently 
      only if the image has not been loaded and error is false */
    if (!imageLoaded && !imageLoadError) {
      return (
        <Fragment>
          <ImageLoader size={size} />
          <img
            src={image || ''}
            className="hide"
            onLoad={this.imageRenderedStatus(image)}
            onError={this.handleImageLoadError}
            alt="userImage"
          />
        </Fragment>
      )
    }
  }

  handleImageLoadError = () => {
    this.setState({
      imageLoadError: true,
      loadedErrorMessage: "Unable to fetch image",
      imageLoaded: true,
    });
  };

  imageRenderedStatus = image => () => {
    this.setState({
      imageLoaded: true,
      imageUrl: image,
    });
  };

  renderImageOrError() {
    const { loadedErrorMessage, imageUrl, imageLoadError, imageLoaded } = this.state;
    if (imageLoaded && !imageLoadError) {
      return (
        <img
          src={imageUrl}
          className="image"
          alt="Random cap"
          onLoad={this.imageRenderedStatus}
        />
      )
    }

    if (imageLoadError) {
      return (
        <span id="image-error-placeholder">
          <h1>{loadedErrorMessage}</h1>
          <p id="error-symbol">!</p>
        </span>
      )
    }
  }

  render() {
    const { imageData } = this.props;
    return (
      <div>
        {this.renderLoaderAndSilentImage(imageData)}
        {this.renderImageOrError()}
      </div>
    )
  }
}

export default ImageCard;