From 1ef3354527bc6edc0e6b8cc891e4adf4df0f6514 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Thu, 17 Jun 2021 10:05:03 +0300
Subject: [PATCH] Add lazy loading for perspective tabs

---
 .../components/facet_results/LeafletMap.js    |  5 +++--
 .../sampo/FacetedSearchPerspective.js         | 20 ++++++++++++-------
 .../perspectives/sampo/InstanceHomePage.js    | 15 +++++++++-----
 .../perspectives/sampo/Perspective1.js        | 20 ++++++++++++-------
 .../perspectives/sampo/Perspective2.js        |  8 +++++---
 .../perspectives/sampo/Perspective3.js        | 11 ++++++----
 src/client/index.js                           | 17 +++++++++++++++-
 7 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/src/client/components/facet_results/LeafletMap.js b/src/client/components/facet_results/LeafletMap.js
index e032b704..1cd2d212 100644
--- a/src/client/components/facet_results/LeafletMap.js
+++ b/src/client/components/facet_results/LeafletMap.js
@@ -1,10 +1,9 @@
-import React from 'react'
+import React, { lazy } from 'react'
 import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
 import intl from 'react-intl-universal'
 import L from 'leaflet'
 import { has, isEqual } from 'lodash'
-import buffer from '@turf/buffer'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { purple } from '@material-ui/core/colors'
 import history from '../../History'
@@ -39,6 +38,8 @@ import markerIconRed from '../../img/markers/marker-icon-red.png'
 import markerIconOrange from '../../img/markers/marker-icon-orange.png'
 import markerIconYellow from '../../img/markers/marker-icon-yellow.png'
 
+const buffer = lazy(() => import('@turf/buffer'))
+
 const styles = theme => ({
   leafletContainerfacetResults: props => ({
     height: 400,
diff --git a/src/client/components/perspectives/sampo/FacetedSearchPerspective.js b/src/client/components/perspectives/sampo/FacetedSearchPerspective.js
index 8998dc5e..a89d7188 100644
--- a/src/client/components/perspectives/sampo/FacetedSearchPerspective.js
+++ b/src/client/components/perspectives/sampo/FacetedSearchPerspective.js
@@ -1,11 +1,17 @@
-import React from 'react'
+import React, { lazy } from 'react'
 import PropTypes from 'prop-types'
-import Perspective1 from './Perspective1'
-import Perspective2 from './Perspective2'
-import Perspective3 from './Perspective3'
-import Finds from './Finds'
-import EmloActors from './EmloActors'
-import Hellerau from './Hellerau'
+// import Perspective1 from './Perspective1'
+// import Perspective2 from './Perspective2'
+// import Perspective3 from './Perspective3'
+// import Finds from './Finds'
+// import EmloActors from './EmloActors'
+// import Hellerau from './Hellerau'
+const Perspective1 = lazy(() => import('./Perspective1'))
+const Perspective2 = lazy(() => import('./Perspective2'))
+const Perspective3 = lazy(() => import('./Perspective3'))
+const Finds = lazy(() => import('./Finds'))
+const EmloActors = lazy(() => import('./EmloActors'))
+const Hellerau = lazy(() => import('./Hellerau'))
 
 /**
  * A component for creating a faceted search perspective for a semantic portal.
diff --git a/src/client/components/perspectives/sampo/InstanceHomePage.js b/src/client/components/perspectives/sampo/InstanceHomePage.js
index 73c54ada..10897dc0 100644
--- a/src/client/components/perspectives/sampo/InstanceHomePage.js
+++ b/src/client/components/perspectives/sampo/InstanceHomePage.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { lazy } from 'react'
 import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
 import Paper from '@material-ui/core/Paper'
@@ -7,14 +7,19 @@ import CircularProgress from '@material-ui/core/CircularProgress'
 import purple from '@material-ui/core/colors/purple'
 import PerspectiveTabs from '../../main_layout/PerspectiveTabs'
 import InstanceHomePageTable from '../../main_layout/InstanceHomePageTable'
-import Network from '../../facet_results/Network'
-import ApexChart from '../../facet_results/ApexChart'
-import Export from '../../facet_results/Export'
-import Recommendations from './Recommendations'
+// import Network from '../../facet_results/Network'
+// import ApexChart from '../../facet_results/ApexChart'
+// import Export from '../../facet_results/Export'
+// import Recommendations from './Recommendations'
 import { coseLayout, cytoscapeStyle, preprocess } from '../../../configs/sampo/Cytoscape.js/NetworkConfig'
 import { createMultipleLineChartData } from '../../../configs/sampo/ApexCharts/LineChartConfig'
 import { Route, Redirect } from 'react-router-dom'
 import { has } from 'lodash'
+// const InstanceHomePageTable = lazy(() => import('../../main_layout/InstanceHomePageTable'))
+const ApexChart = lazy(() => import('../../facet_results/ApexChart'))
+const Network = lazy(() => import('../../facet_results/Network'))
+const Export = lazy(() => import('../../facet_results/Export'))
+const Recommendations = lazy(() => import('./Recommendations'))
 
 const styles = () => ({
   root: {
diff --git a/src/client/components/perspectives/sampo/Perspective1.js b/src/client/components/perspectives/sampo/Perspective1.js
index f81bc0fb..b7d0ff31 100644
--- a/src/client/components/perspectives/sampo/Perspective1.js
+++ b/src/client/components/perspectives/sampo/Perspective1.js
@@ -1,14 +1,14 @@
-import React from 'react'
+import React, { lazy } from 'react'
 import PropTypes from 'prop-types'
 import intl from 'react-intl-universal'
 import { Route, Redirect } from 'react-router-dom'
 import PerspectiveTabs from '../../main_layout/PerspectiveTabs'
-import ResultTable from '../../facet_results/ResultTable'
-import LeafletMap from '../../facet_results/LeafletMap'
-import Deck from '../../facet_results/Deck'
-import ApexChart from '../../facet_results/ApexChart'
-import Network from '../../facet_results/Network'
-import Export from '../../facet_results/Export'
+// import ResultTable from '../../facet_results/ResultTable'
+// import LeafletMap from '../../facet_results/LeafletMap'
+// import Deck from '../../facet_results/Deck'
+// import ApexChart from '../../facet_results/ApexChart'
+// import Network from '../../facet_results/Network'
+// import Export from '../../facet_results/Export'
 import {
   MAPBOX_ACCESS_TOKEN,
   MAPBOX_STYLE
@@ -19,6 +19,12 @@ import {
 } from '../../../configs/sampo/ApexCharts/LineChartConfig'
 import { coseLayout, cytoscapeStyle, preprocess } from '../../../configs/sampo/Cytoscape.js/NetworkConfig'
 import { layerConfigs, createPopUpContentMMM } from '../../../configs/sampo/Leaflet/LeafletConfig'
+const ResultTable = lazy(() => import('../../facet_results/ResultTable'))
+const LeafletMap = lazy(() => import('../../facet_results/LeafletMap'))
+const Deck = lazy(() => import('../../facet_results/Deck'))
+const ApexChart = lazy(() => import('../../facet_results/ApexChart'))
+const Network = lazy(() => import('../../facet_results/Network'))
+const Export = lazy(() => import('../../facet_results/Export'))
 
 const Perspective1 = props => {
   const { rootUrl, perspective, screenSize } = props
diff --git a/src/client/components/perspectives/sampo/Perspective2.js b/src/client/components/perspectives/sampo/Perspective2.js
index a125b74f..ba383445 100644
--- a/src/client/components/perspectives/sampo/Perspective2.js
+++ b/src/client/components/perspectives/sampo/Perspective2.js
@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { lazy } from 'react'
 import PropTypes from 'prop-types'
 import { Route, Redirect } from 'react-router-dom'
 import PerspectiveTabs from '../../main_layout/PerspectiveTabs'
-import ResultTable from '../../facet_results/ResultTable'
-import Export from '../../facet_results/Export'
+// import ResultTable from '../../facet_results/ResultTable'
+// import Export from '../../facet_results/Export'
+const ResultTable = lazy(() => import('../../facet_results/ResultTable'))
+const Export = lazy(() => import('../../facet_results/Export'))
 
 const Perspective2 = props => {
   const { rootUrl, perspective } = props
diff --git a/src/client/components/perspectives/sampo/Perspective3.js b/src/client/components/perspectives/sampo/Perspective3.js
index 94b1c109..f03e9349 100644
--- a/src/client/components/perspectives/sampo/Perspective3.js
+++ b/src/client/components/perspectives/sampo/Perspective3.js
@@ -1,15 +1,18 @@
-import React from 'react'
+import React, { lazy } from 'react'
 import PropTypes from 'prop-types'
 import { Route, Redirect } from 'react-router-dom'
 import PerspectiveTabs from '../../main_layout/PerspectiveTabs'
-import ResultTable from '../../facet_results/ResultTable'
-import Export from '../../facet_results/Export'
-import LeafletMap from '../../facet_results/LeafletMap'
+// import ResultTable from '../../facet_results/ResultTable'
+// import Export from '../../facet_results/Export'
+// import LeafletMap from '../../facet_results/LeafletMap'
 import {
   MAPBOX_ACCESS_TOKEN,
   MAPBOX_STYLE
 } from '../../../configs/sampo/GeneralConfig'
 import { layerConfigs, createPopUpContentMMM } from '../../../configs/sampo/Leaflet/LeafletConfig'
+const ResultTable = lazy(() => import('../../facet_results/ResultTable'))
+const LeafletMap = lazy(() => import('../../facet_results/LeafletMap'))
+const Export = lazy(() => import('../../facet_results/Export'))
 
 const Perspective3 = props => {
   const { rootUrl, perspective, screenSize } = props
diff --git a/src/client/index.js b/src/client/index.js
index 8de2fb66..2b0154e6 100644
--- a/src/client/index.js
+++ b/src/client/index.js
@@ -10,6 +10,8 @@ import { availableLocales } from './epics/index.js'
 import { loadLocales } from './actions'
 import { defaultLocale } from './configs/sampo/GeneralConfig'
 import { updateLocaleToPathname } from './helpers/helpers'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import purple from '@material-ui/core/colors/purple'
 
 import './index.css'
 import 'react-sortable-tree/style.css'
@@ -44,7 +46,20 @@ render(
   <Provider store={store}>
     <div id='app'>
       <Router history={history}>
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense
+          fallback={
+            <div style={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+            >
+              <CircularProgress style={{ color: purple[500] }} thickness={5} />
+            </div>
+          }
+        >
           <App />
         </Suspense>
       </Router>
-- 
GitLab