Enable more things to be chunked

__tests__/src/components/PrimaryWindow.test.js

@@ -2,8 +2,6 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { PrimaryWindow } from '../../../src/components/PrimaryWindow';
 import WindowSideBar from '../../../src/containers/WindowSideBar';
-import WindowViewer from '../../../src/containers/WindowViewer';
-import GalleryView from '../../../src/containers/GalleryView';
 import CollectionDialog from '../../../src/containers/CollectionDialog';
 
 /** create wrapper */
@@ -28,15 +26,20 @@ describe('PrimaryWindow', () => {
   });
   it('should render nothing if manifest is still fetching', () => {
     const wrapper = createWrapper({ isFetching: true });
-    expect(wrapper.find(WindowViewer)).toHaveLength(0);
+    const suspenseComponent = wrapper.find('Suspense');
+    expect(suspenseComponent).toEqual({});
   });
   it('should render <WindowViewer> if manifest is present', () => {
     const wrapper = createWrapper({ isFetching: false });
-    expect(wrapper.find(WindowViewer)).toHaveLength(1);
+    const suspenseComponent = wrapper.find('Suspense');
+    const lazyComponent = suspenseComponent.dive().find('lazy');
+    expect(lazyComponent.type().displayName).toBe('WindowViewer');
   });
   it('should render <GalleryView> if manifest is present and view is gallery', () => {
     const wrapper = createWrapper({ isFetching: false, view: 'gallery', windowId: 'window-2' });
-    expect(wrapper.find(GalleryView)).toHaveLength(1);
+    const suspenseComponent = wrapper.find('Suspense');
+    const lazyComponent = suspenseComponent.dive().find('lazy');
+    expect(lazyComponent.type().displayName).toBe('GalleryView');
   });
   it('should render <CollectionDialog> and <SelectCollection> if manifest is collection and isCollectionDialogVisible', () => {
     const wrapper = createWrapper({ isCollection: true, isCollectionDialogVisible: true });

__tests__/src/components/WindowViewer.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import { WindowViewer } from '../../../src/components/WindowViewer';
-import OSDViewer from '../../../src/containers/OpenSeadragonViewer';
 import WindowCanvasNavigationControls from '../../../src/containers/WindowCanvasNavigationControls';
 
 /** create wrapper */
-function createWrapper(props) {
+function createWrapper(props, suspenseFallback) {
   return shallow(
     <WindowViewer
       windowId="xyz"
       {...props}
     />,
+    { suspenseFallback },
   );
 }
 
 describe('WindowViewer', () => {
   let wrapper;
-  it('renders properly', () => {
-    wrapper = createWrapper();
-    expect(wrapper.matchesElement(
-      <OSDViewer>
-        <WindowCanvasNavigationControls />
-      </OSDViewer>,
-    )).toBe(true);
+  describe('when lazy imorts have not loaded', () => {
+    it('renders fallback', () => {
+      wrapper = createWrapper({}, true);
+      const suspenseComponent = wrapper.find('Suspense').dive();
+      expect(suspenseComponent.find('div').length).toBe(1);
+    });
+  });
+  describe('when lazy imorts have loaded', () => {
+    it('renders expected components', () => {
+      wrapper = createWrapper({}, false);
+      const suspenseComponent = wrapper.find('Suspense').dive();
+      expect(suspenseComponent.find('lazy').props().windowId).toBe('xyz');
+      expect(suspenseComponent.find(WindowCanvasNavigationControls).props().windowId).toBe('xyz');
+    });
   });
 });

src/components/PrimaryWindow.js

-import React, { Component, lazy } from 'react';
+import React, { Component, lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import WindowSideBar from '../containers/WindowSideBar';
-import WindowViewer from '../containers/WindowViewer';
-import GalleryView from '../containers/GalleryView';
 import CompanionArea from '../containers/CompanionArea';
 import CollectionDialog from '../containers/CollectionDialog';
 import ns from '../config/css-ns';
 
+const GalleryView = lazy(() => import('../containers/GalleryView'));
 const SelectCollection = lazy(() => import('../containers/SelectCollection'));
+const WindowViewer = lazy(() => import('../containers/WindowViewer'));
+
+GalleryView.displayName = 'GalleryView';
 SelectCollection.displayName = 'SelectCollection';
+WindowViewer.displayName = 'WindowViewer';
 
 /**
  * WindowMiddleContent - component that renders the "middle" area of the
@@ -61,7 +64,9 @@ export class PrimaryWindow extends Component {
       <div className={classNames(ns('primary-window'), classes.primaryWindow)}>
         <WindowSideBar windowId={windowId} />
         <CompanionArea windowId={windowId} position="left" />
+        <Suspense fallback={<div />}>
           {this.renderViewer()}
+        </Suspense>
       </div>
     );
   }

src/components/WindowViewer.js

-import React, { Component } from 'react';
+import React, { Component, lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
-import OSDViewer from '../containers/OpenSeadragonViewer';
 import WindowCanvasNavigationControls from '../containers/WindowCanvasNavigationControls';
 
+const OSDViewer = lazy(() => import('../containers/OpenSeadragonViewer'));
+
 /**
  * Represents a WindowViewer in the mirador workspace. Responsible for mounting
  * OSD and Navigation
@@ -33,11 +34,13 @@ export class WindowViewer extends Component {
     }
 
     return (
+      <Suspense fallback={<div />}>
         <OSDViewer
           windowId={windowId}
         >
           <WindowCanvasNavigationControls windowId={windowId} />
         </OSDViewer>
+      </Suspense>
     );
   }
 }