From 35c78f0d78ab07d6c325fc2813d72a2351bcbff1 Mon Sep 17 00:00:00 2001
From: Chris Beer <cabeer@stanford.edu>
Date: Fri, 15 Mar 2019 10:48:55 -0700
Subject: [PATCH] Use react-image to provide placeholder images (in case there
is no image url, the image doesn't load, etc)
Fixes #1966
---
package.json | 1 +
src/components/ManifestListItem.js | 40 ++++++++++++++++--------------
src/containers/ManifestListItem.js | 3 +++
3 files changed, 25 insertions(+), 19 deletions(-)
diff --git a/package.json b/package.json
index aaee48b36..245bac59f 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 473230218..fb9f1e935 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 7a1959703..62d3515fa 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(
--
GitLab