Use react-image to provide placeholder images (in case there is no image url,...

Use react-image to provide placeholder images (in case there is no image url, the image doesn't load, etc)

Fixes #1966

package.json

@@ -52,6 +52,7 @@
     "prop-types": "^15.6.2",
     "react-full-screen": "^0.2.4",
     "react-i18next": "^10.2.0",
+    "react-image": "^2.0.0",
     "react-mosaic-component": "^2.1.0",
     "react-placeholder": "^3.0.1",
     "react-redux": "^6.0.0",

src/components/ManifestListItem.js

@@ -6,6 +6,7 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import ReactPlaceholder from 'react-placeholder';
 import { TextBlock, TextRow, RectShape } from 'react-placeholder/lib/placeholders';
+import Img from 'react-image';
 import ManifestListItemError from '../containers/ManifestListItemError';
 import ns from '../config/css-ns';
 import 'react-placeholder/lib/reactPlaceholder.css';
@@ -94,16 +95,18 @@ export class ManifestListItem extends React.Component {
               >
                 <Grid container spacing={24} className={classes.label}>
                   <Grid item xs={4} sm={3}>
-                    {
-                      <ReactPlaceholder ready={!!thumbnail} type="rect" style={{ width: 120, height: 80 }}>
-                        <img
+                    <Img
                       className={ns('manifest-list-item-thumb')}
-                          src={thumbnail}
+                      src={[thumbnail]}
                       alt=""
                       height="80"
+                      unloader={(
+                        <RectShape
+                          className={classes.placeholder}
+                          style={{ width: 120, height: 80 }}
+                        />
+                      )}
                     />
-                      </ReactPlaceholder>
-                    }
                   </Grid>
                   <Grid item xs={8} sm={9}>
                     <Typography component="span" variant="h6">
@@ -119,16 +122,15 @@ export class ManifestListItem extends React.Component {
             </Grid>
 
             <Grid item xs={4} sm={2}>
-              {
-                <ReactPlaceholder ready={!!manifestLogo} type="rect" style={{ width: 60, height: 60 }}>
-                  <img
-                    src={manifestLogo}
+              <Img
+                src={[manifestLogo]}
                 alt=""
                 role="presentation"
                 className={classes.logo}
-                  />
-                </ReactPlaceholder>
+                unloader={
+                  <RectShape className={classes.placeholder} style={{ width: 60, height: 60 }} />
                 }
+              />
             </Grid>
           </Grid>
         </ReactPlaceholder>

src/containers/ManifestListItem.js

@@ -48,6 +48,9 @@ const styles = theme => ({
     height: '2.5rem',
     paddingRight: 8,
   },
+  placeholder: {
+    backgroundColor: theme.palette.grey[300],
+  },
 });
 
 const enhance = compose(