import React, { Fragment } from "react";
import AthleteIcon from '@material-ui/icons/AccountCircle';

class AltImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false
    };
    this.handleImageLoaded = this.handleImageLoaded.bind(this);
  }

  handleImageLoaded() {
    this.setState({ loaded: true });
  }

  render() {
    const { loaded } = this.state;
    const imageStyle = !loaded ? { display: "none" } : {};
    return (
      <Fragment>
        {!loaded && <AthleteIcon style={{width: '100%', height: '100%'}} /> }
        <img src={this.props.src} style={imageStyle} onLoad={this.handleImageLoaded} />
      </Fragment>
    )
  }
}

export default AltImage;