Progress

app/javascript/gabsocial/components/image.js

@@ -1,21 +1,18 @@
 import classNames from 'classnames/bind'
 
-// : testing :
-// : todo :
-const placeholderSource = 'https://source.unsplash.com/random'
-const imageUnavailable = 'https://source.unsplash.com/random'
-
 const cx = classNames.bind(_s)
 
 export default class Image extends PureComponent {
+
   static propTypes = {
-    alt: PropTypes.string,
+    alt: PropTypes.string.isRequired,
     src: PropTypes.string,
     className: PropTypes.string,
     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     fit: PropTypes.oneOf(['contain', 'cover', 'tile', 'none']),
     nullable: PropTypes.bool,
+    lazy: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -32,29 +29,41 @@ export default class Image extends PureComponent {
   }
 
   render() {
-    const { src, fit, className, nullable, ...otherProps } = this.props
+    const {
+      src,
+      fit,
+      className,
+      nullable,
+      lazy,
+      ...otherProps
+    } = this.props
     const { error } = this.state
 
-    let source = src || placeholderSource
     const classes = cx(className, {
       default: 1,
-      objectFitCover: fit === 'cover'
+      objectFitCover: !!src && fit === 'cover',
+      backgroundSubtle2: 1,
     })
 
     //If error and not our own image
     if (error && nullable) {
       return null
-    } else if (error) {
-      source = imageUnavailable
     }
-    
+
+    if (!src) {
+      return (
+        <div className={classes} />
+      )
+    }
+
     return (
       <img
         className={classes}
         {...otherProps}
-        src={source}
+        src={src}
         onError={this.handleOnError}
       />
     )
   }
+
 }