Remove react-imageloader (#3423)

* Remove react-imageloader

* add eslint-disable-line

* improve image loading experience

* remove unneeded import

* use PureComponent

* Use componentWillMount instead of constructor

1 files changed, 45 insertions, 0 deletions

diff --git a/app/javascript/mastodon/features/ui/components/image_loader.js b/app/javascript/mastodon/features/ui/components/image_loader.js
new file mode 100644
index 000000000..af2870517
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/image_loader.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class ImageLoader extends React.PureComponent {
+
+  static propTypes = {
+    src: PropTypes.string.isRequired,
+  }
+
+  state = {
+    loading: true,
+    error: false,
+  }
+
+  componentWillMount() {
+    this.loadImage(this.props.src);
+  }
+
+  componentWillReceiveProps(props) {
+    this.loadImage(props.src);
+  }
+
+  loadImage(src) {
+    const image = new Image();
+    image.onerror = () => this.setState({loading: false, error: true});
+    image.onload = () => this.setState({loading: false, error: false});
+    image.src = src;
+    this.lastSrc = src;
+    this.setState({loading: true});
+  }
+
+  render() {
+    const { src } = this.props;
+    const { loading, error } = this.state;
+
+    // TODO: handle image error state
+
+    const imageClass = `image-loader__img ${loading ? 'image-loader__img-loading' : ''}`;
+
+    return <img className={imageClass} src={src} />; // eslint-disable-line jsx-a11y/img-has-alt
+  }
+
+}
+
+export default ImageLoader;