app/javascript/mastodon/features/ui/components/image_loader.js

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3
   4 class ImageLoader extends React.PureComponent {
   5
   6   static propTypes = {
   7     src: PropTypes.string.isRequired,
   8   }
   9
  10   state = {
  11     loading: true,
  12     error: false,
  13   }
  14
  15   componentWillMount() {
  16     this.loadImage(this.props.src);
  17   }
  18
  19   componentWillReceiveProps(props) {
  20     this.loadImage(props.src);
  21   }
  22
  23   loadImage(src) {
  24     const image = new Image();
  25     image.onerror = () => this.setState({ loading: false, error: true });
  26     image.onload = () => this.setState({ loading: false, error: false });
  27     image.src = src;
  28     this.lastSrc = src;
  29     this.setState({ loading: true });
  30   }
  31
  32   render() {
  33     const { src } = this.props;
  34     const { loading, error } = this.state;
  35
  36     // TODO: handle image error state
  37
  38     const imageClass = `image-loader__img ${loading ? 'image-loader__img-loading' : ''}`;
  39
  40     return <img className={imageClass} src={src} />; // eslint-disable-line jsx-a11y/img-has-alt
  41   }
  42
  43 }
  44
  45 export default ImageLoader;