Delay loading unnecessary manifests until they are required for rendering e.g. in the add window

__tests__/src/actions/manifest.test.js

@@ -45,7 +45,7 @@ describe('manifest actions', () => {
       it('dispatches the REQUEST_MANIFEST action', () => {
         store.dispatch(actions.fetchManifest('https://purl.stanford.edu/sn904cj3429/iiif/manifest'));
         expect(store.getActions()).toEqual([
-          { manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest', type: 'REQUEST_MANIFEST' },
+          { manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest', type: 'REQUEST_MANIFEST', properties: { isFetching: true } },
         ]);
       });
       it('dispatches the REQUEST_MANIFEST and then RECEIVE_MANIFEST', () => {

__tests__/src/components/ManifestListItem.test.js

@@ -30,6 +30,12 @@ describe('ManifestListItem', () => {
     expect(wrapper.find('.mirador-manifest-list-item').length).toBe(1);
     expect(wrapper.find('ReactPlaceholder').length).toBe(1);
   });
+  it('renders an error message if fetching the manifest failed', () => {
+    const wrapper = createWrapper({ error: 'This is an error message' });
+
+    expect(wrapper.find('WithStyles(Paper)').length).toBe(1);
+    expect(wrapper.find('WithStyles(Paper)').children().text()).toEqual('This is an error message');
+  });
   it('updates and adds window when button clicked', () => {
     const addWindow = jest.fn();
     const wrapper = createWrapper({ addWindow });

__tests__/src/reducers/manifests.test.js

@@ -9,7 +9,6 @@ describe('manifests reducer', () => {
     })).toEqual({
       abc123: {
         id: 'abc123',
-        isFetching: true,
       },
     });
   });

src/components/ManifestListItem.js

@@ -25,10 +25,30 @@ const handleOpenButtonClick = (event, manifest, addWindow) => {
 
 /** */
 class ManifestListItem extends React.Component {
+  /** */
+  componentDidMount() {
+    const {
+      fetchManifest, manifestId, ready, isFetching, error,
+    } = this.props;
+
+    if (!ready && !error && !isFetching) fetchManifest(manifestId);
+  }
+
   /** */
   render() {
     const {
-      manifestId, ready, title, thumbnail, logo, addWindow, handleClose, size, classes, provider, t,
+      manifestId,
+      ready,
+      title,
+      thumbnail,
+      logo,
+      addWindow,
+      handleClose,
+      size,
+      classes,
+      provider,
+      t,
+      error,
     } = this.props;
 
     const placeholder = (
@@ -48,6 +68,14 @@ class ManifestListItem extends React.Component {
       </Grid>
     );
 
+    if (error) {
+      return (
+        <Paper elevation={1} className={classes.root} data-manifestid={manifestId}>
+          {error}
+        </Paper>
+      );
+    }
+
     return (
       <Paper elevation={1} className={classes.root} data-manifestid={manifestId}>
         <ReactPlaceholder
@@ -113,6 +141,9 @@ ManifestListItem.propTypes = {
   classes: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   provider: PropTypes.string,
   t: PropTypes.func,
+  fetchManifest: PropTypes.func.isRequired,
+  error: PropTypes.string,
+  isFetching: PropTypes.bool,
 };
 
 ManifestListItem.defaultProps = {
@@ -125,6 +156,8 @@ ManifestListItem.defaultProps = {
   size: 0,
   provider: null,
   t: key => key,
+  error: null,
+  isFetching: false,
 };
 
 /** */

src/containers/ManifestListItem.js

@@ -13,6 +13,8 @@ const mapStateToProps = (state, { manifestId }) => {
 
   return {
     ready: !!manifest.manifestation,
+    error: manifest.error,
+    isFetching: manifest.isFetching,
     title: getManifestTitle(manifest),
     logo: getManifestLogo(manifest),
     thumbnail: getManifestThumbnail(manifest),
@@ -26,7 +28,7 @@ const mapStateToProps = (state, { manifestId }) => {
  * @memberof ManifestListItem
  * @private
  */
-const mapDispatchToProps = { addWindow: actions.addWindow };
+const mapDispatchToProps = { addWindow: actions.addWindow, fetchManifest: actions.fetchManifest };
 
 const enhance = compose(
   connect(mapStateToProps, mapDispatchToProps),

src/lib/MiradorViewer.js

@@ -66,7 +66,7 @@ class MiradorViewer {
 
     Object.keys(mergedConfig.manifests || {}).forEach((manifestId) => {
       this.store.dispatch(
-        actions.fetchManifest(manifestId, mergedConfig.manifests[manifestId]),
+        actions.requestManifest(manifestId, mergedConfig.manifests[manifestId]),
       );
     });
   }

src/state/actions/manifest.js

@@ -53,7 +53,8 @@ export function receiveManifestFailure(manifestId, error) {
  */
 export function fetchManifest(manifestId, properties) {
   return ((dispatch) => {
-    dispatch(requestManifest(manifestId, properties));
+    dispatch(requestManifest(manifestId, { ...properties, isFetching: true }));
+
     return fetch(manifestId)
       .then(response => response.json())
       .then(json => dispatch(receiveManifest(manifestId, json)))

src/state/reducers/manifests.js

@@ -13,7 +13,6 @@ export const manifestsReducer = (state = {}, action) => {
           ...state[action.manifestId],
           ...action.properties,
           id: action.manifestId,
-          isFetching: true,
         },
       };
     case ActionTypes.RECEIVE_MANIFEST: