diff --git a/package.json b/package.json
index aaee48b36a160973221642dcc61970bd433f5d01..245bac59f9f52962d09da810f34f9e2d2b32aee6 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js
index 473230218ba4763acc80d64cef80c5d77be828de..fb9f1e9357afa441fe30b3eb3a4324bccf489e91 100644
--- a/src/components/ManifestListItem.js
+++ b/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
-                          className={ns('manifest-list-item-thumb')}
-                          src={thumbnail}
-                          alt=""
-                          height="80"
+                    <Img
+                      className={ns('manifest-list-item-thumb')}
+                      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}
-                    alt=""
-                    role="presentation"
-                    className={classes.logo}
-                  />
-                </ReactPlaceholder>
-              }
+              <Img
+                src={[manifestLogo]}
+                alt=""
+                role="presentation"
+                className={classes.logo}
+                unloader={
+                  <RectShape className={classes.placeholder} style={{ width: 60, height: 60 }} />
+                }
+              />
             </Grid>
           </Grid>
         </ReactPlaceholder>
diff --git a/src/containers/ManifestListItem.js b/src/containers/ManifestListItem.js
index 7a195970335e17feb9981e46d61cecd9a7425003..62d3515fa6767d4d420e6e0b96630b5a6b36fb6e 100644
--- a/src/containers/ManifestListItem.js
+++ b/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(