Lazy load resource maps to improve loading time (#274)

Changed search and resource pages to load `ResourceMap` dynamically when switching to map view. This decreases the bundle size of each page.
City-of-Turku · Sep 21, 2023 · 08b217d · 08b217d
1 parent 541ccc4
commit 08b217d
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 42 deletions.
diff --git a/app/assets/styles/_loader.scss b/app/assets/styles/_loader.scss
@@ -2,3 +2,19 @@
   position: relative;
   min-height: 100px;
 }
+
+.loader-ease-in {
+  animation: easeIn 0.3s;
+}
+
+@keyframes easeIn {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
diff --git a/app/pages/resource/ResourcePage.js b/app/pages/resource/ResourcePage.js
@@ -3,7 +3,7 @@ import isEmpty from 'lodash/isEmpty';
 import findIndex from 'lodash/findIndex';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, Suspense, lazy } from 'react';
 import Loader from 'react-loader';
 import { connect } from 'react-redux';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
@@ -20,7 +20,6 @@ import { clearReservations, toggleResourceMap } from 'actions/uiActions';
 import PageWrapper from 'pages/PageWrapper';
 import NotFoundPage from 'pages/not-found';
 import ResourceCalendar from 'shared/resource-calendar';
-import ResourceMap from 'shared/resource-map';
 import { injectT } from 'i18n';
 import userManager from 'utils/userManager';
 import {
@@ -37,6 +36,8 @@ import {
   fetchResourceOutlookCalendarLinks,
 } from 'resource-outlook-linker/actions';
 
+const ResourceMap = lazy(() => import('shared/resource-map'));
+
 class UnconnectedResourcePage extends Component {
   constructor(props) {
     super(props);
@@ -269,12 +270,14 @@ class UnconnectedResourcePage extends Component {
           />
           {showMap && unit && <ResourceMapInfo currentLanguage={currentLanguage} unit={unit} />}
           {showMap && (
-            <ResourceMap
-              location={location}
-              resourceIds={[resource.id]}
-              selectedUnitId={unit ? unit.id : null}
-              showMap={showMap}
-            />
+            <Suspense fallback={<Loader className="loader-ease-in" />}>
+              <ResourceMap
+                location={location}
+                resourceIds={[resource.id]}
+                selectedUnitId={unit ? unit.id : null}
+                showMap={showMap}
+              />
+            </Suspense>
           )}
           {!showMap && (
             <PageWrapper

diff --git a/app/pages/resource/ResourcePage.spec.js b/app/pages/resource/ResourcePage.spec.js
@@ -10,7 +10,6 @@ import { shallow } from 'enzyme';
 import NotFoundPage from 'pages/not-found/NotFoundPage';
 import PageWrapper from 'pages/PageWrapper';
 import ResourceCalendar from 'shared/resource-calendar';
-import ResourceMap from 'shared/resource-map';
 import Resource from 'utils/fixtures/Resource';
 import Unit from 'utils/fixtures/Unit';
 import { getResourcePageUrl } from 'utils/resourceUtils';
@@ -195,16 +194,6 @@ describe('pages/resource/ResourcePage', () => {
         expect(resourceMapInfo.prop('currentLanguage')).toBe(defaultProps.currentLanguage);
       });
 
-      test('renders a ResourceMap', () => {
-        const wrapper = getShowMapWrapper();
-        const resourceMap = wrapper.find(ResourceMap);
-        expect(resourceMap).toHaveLength(1);
-        expect(resourceMap.prop('location')).toBe(defaultProps.location);
-        expect(resourceMap.prop('resourceIds')).toEqual([defaultProps.resource.id]);
-        expect(resourceMap.prop('selectedUnitId')).toBe(defaultProps.unit.id);
-        expect(resourceMap.prop('showMap')).toBe(true);
-      });
-
       test('does not render a ResourceInfo', () => {
         const wrapper = getShowMapWrapper();
         const resourceInfo = wrapper.find(ResourceInfo);

diff --git a/app/pages/search/SearchPage.js b/app/pages/search/SearchPage.js
@@ -1,25 +1,27 @@
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, lazy, Suspense } from 'react';
 import { connect } from 'react-redux';
 import queryString from 'query-string';
 import { bindActionCreators } from 'redux';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
+import Loader from 'react-loader';
 
 import { searchResources, toggleMap } from 'actions/searchActions';
 import { changeSearchFilters } from 'actions/uiActions';
 import { fetchPurposes } from 'actions/purposeActions';
 import { fetchUnits } from 'actions/unitActions';
 import PageWrapper from 'pages/PageWrapper';
 import { injectT } from 'i18n';
-import ResourceMap from 'shared/resource-map';
 import SearchControls from './controls';
 import searchPageSelector from './searchPageSelector';
 import SearchResults from './results/SearchResults';
 import Sort from './Sort';
 import MapToggle from './results/MapToggle';
 
+const ResourceMap = lazy(() => import('shared/resource-map'));
+
 class UnconnectedSearchPage extends Component {
   constructor(props) {
     super(props);
@@ -119,14 +121,15 @@ class UnconnectedSearchPage extends Component {
           </Row>
           <div className="app-SearchPage__content">
             {showMap && (
-            <ResourceMap
-              location={location}
-              resourceIds={searchResultIds}
-              selectedUnitId={selectedUnitId}
-              showMap={showMap}
-            />
+            <Suspense fallback={<Loader className="loader-ease-in" />}>
+              <ResourceMap
+                location={location}
+                resourceIds={searchResultIds}
+                selectedUnitId={selectedUnitId}
+                showMap={showMap}
+              />
+            </Suspense>
             )}
-
             {(searchDone || isFetchingSearchResults) && (
             <SearchResults
               history={history}

diff --git a/app/pages/search/SearchPage.spec.js b/app/pages/search/SearchPage.spec.js
@@ -5,7 +5,6 @@ import simple from 'simple-mock';
 
 import PageWrapper from 'pages/PageWrapper';
 import { shallowWithIntl } from 'utils/testUtils';
-import ResourceMap from 'shared/resource-map';
 import { UnconnectedSearchPage as SearchPage } from './SearchPage';
 import Sort from './Sort';
 import SearchControls from './controls';
@@ -89,19 +88,6 @@ describe('pages/search/SearchPage', () => {
       expect(mapToggle.prop('contrast')).toBe('high-contrast');
     });
 
-    test('renders a ResourceMap with correct props', () => {
-      const props = {
-        searchResultIds: Immutable(['resource-1', 'resource-2']),
-        selectedUnitId: '123',
-        showMap: true,
-      };
-      const resourceMap = getWrapper(props).find(ResourceMap);
-      expect(resourceMap).toHaveLength(1);
-      expect(resourceMap.prop('showMap')).toBe(true);
-      expect(resourceMap.prop('resourceIds')).toEqual(props.searchResultIds);
-      expect(resourceMap.prop('selectedUnitId')).toBe(props.selectedUnitId);
-    });
-
     test('renders search results header', () => {
       const header = getWrapper().find('.app-SearchPage__header');
       expect(header).toHaveLength(1);