diff --git a/src/client/components/facet_results/LeafletMap.js b/src/client/components/facet_results/LeafletMap.js index e032b704f860d5d8d2cefbb348c3af8622b861fd..1cd2d21223d4a5eea228c12f77e905a760038ae0 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 8998dc5e6cc334f9e44a709f5a85b9533aad7c09..a89d71887eab1eb1eede23588549e5f64cfa27c2 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 73c54ada1078e37ad7d608c5ee5697b484f8f4cb..10897dc0cf0ff9e8a146531b2a68626953b00f08 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 f81bc0fb9f5e8222953b1a86ffadc163ff003725..b7d0ff31839e976a707427fabb5a8c2ac54581ae 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 a125b74f65fd5c8dad9fc202867deb60df4d3e52..ba383445205d4b1bf385232e395de2c68d28a493 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 94b1c109cd3eba4f1f26e5ff301f42ee079e1f3f..f03e93490cfa1790029da14be51f4447a64e1e8d 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 8de2fb660f19960df14c415ee887d475a77295b2..2b0154e632dc3561192d8a892d5776fdef08bc25 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>