Add lazy loading for perspective tabs

src/client/components/facet_results/LeafletMap.js

-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,

src/client/components/perspectives/sampo/FacetedSearchPerspective.js

-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.

src/client/components/perspectives/sampo/InstanceHomePage.js

-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: {

src/client/components/perspectives/sampo/Perspective1.js

-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

src/client/components/perspectives/sampo/Perspective2.js

-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

src/client/components/perspectives/sampo/Perspective3.js

-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

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>