Code splitting setup for all modules

src/accessions/routes.ts

-import AccessionBrowsePage from 'accessions/ui/BrowsePage';
-import MapBrowsePage from 'accessions/ui/MapPage';
-import AccessionDisplayPage from 'accessions/ui/DisplayPage';
-import AccessionOverviewPage from 'accessions/ui/OverviewPage';
+import Loading from 'ui/common/Loading';
+import * as Loadable from 'react-loadable';
 
 
 const publicRoutes = [
   {
     path: '/a/:filterCode(v.+)?',
-    component: AccessionBrowsePage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "accessions" */'accessions/ui/BrowsePage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     path: '/a/overview/:filterCode(v.+)?',
-    component: AccessionOverviewPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "accessions" */'accessions/ui/OverviewPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     path: '/a/map/:filterCode(v.+)?',
-    component: MapBrowsePage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "accessions" */'accessions/ui/MapPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     path: '/a/:uuid([a-z\\-0-9]+)',
-    component: AccessionDisplayPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "accessions" */'accessions/ui/DisplayPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     // We need to take out the '10.' prefix for matching to work
     path: '/10.:doi(\\d+\/.+)',
-    component: AccessionDisplayPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "accessions" */'accessions/ui/DisplayPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
 ];

src/cms/routes.ts

-import ContentPage from 'cms/ui/ContentPage';
-import EditPage from 'cms/ui/admin/EditPage';
-import BrowsePage from 'cms/ui/admin/BrowsePage';
-import DocumentationPage from 'cms/ui/DocumentationPage';
+import Loading from 'ui/common/Loading';
+import * as Loadable from 'react-loadable';
 
 
 const publicRoutes = [
   {
     path: '/content/:menuKey/:slug',
-    component: ContentPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "cms" */'cms/ui/ContentPage'),
+      loading: Loading,
+    }),
   },
   {
     path: '/content/:slug',
-    component: ContentPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "cms" */'cms/ui/ContentPage'),
+      loading: Loading,
+    }),
   },
   {
     path: '/documentation/:slug',
-    component: DocumentationPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "cms" */'cms/ui/DocumentationPage'),
+      loading: Loading,
+    }),
   },
 ];
 
 const adminRoutes = [
   {
     path: '/content/:slug/edit',
-    component: EditPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "cms" */'cms/ui/admin/EditPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     path: '/content/:slug/edit/:className/:targetId',
-    component: EditPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "cms" */'cms/ui/admin/EditPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     path: '/content/edit',
-    component: EditPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "cms" */'cms/ui/admin/EditPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     path: '/content/:filterCode(v.+)?',
-    component: BrowsePage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "cms" */'cms/ui/admin/BrowsePage'),
+      loading: Loading,
+    }),
   },
 ];
 

src/crop/routes.ts

-// Root
-import CropBrowsePage from 'crop/ui/BrowsePage';
-import CropDisplayPage from 'crop/ui/DisplayPage';
-import CropEditPage from 'crop/ui/EditPage';
-
-// Admin
-
-// Dashboard
+import Loading from 'ui/common/Loading';
+import * as Loadable from 'react-loadable';
 
 // Root routes
 const rootRoutes = [
   // Crops
   {
-      path: '/c/',
-      component: CropBrowsePage,
-      exact: true,
+    path: '/c/',
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "crop" */'crop/ui/BrowsePage'),
+      loading: Loading,
+    }),
+    exact: true,
   },
   {
     path: '/c/:shortName/edit',
-    component: CropEditPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "crop" */'crop/ui/EditPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     path: '/c/edit',
-    component: CropEditPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "crop" */'crop/ui/EditPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
-      path: '/c/:shortName',
-      component: CropDisplayPage,
-      exact: true,
+    path: '/c/:shortName',
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "crop" */'crop/ui/DisplayPage'),
+      loading: Loading,
+    }),
+    exact: true,
   },
 ];
 

src/datasets/routes.ts

-import DatasetSuggestionsPage from 'datasets/ui/search/SuggestionsPage';
-import DatasetBrowsePage from 'datasets/ui/BrowsePage';
-import DatasetDisplayPage from 'datasets/ui/DisplayPage';
-import DatasetStepper from 'datasets/ui/dashboard/StepperPage';
-import DatasetDashboardPage from 'datasets/ui/dashboard/DashboardPage';
-
-import datasetSteps from 'datasets/ui/dashboard/dataset-stepper/steps';
-import BasicInfoStep from 'datasets/ui/dashboard/dataset-stepper/steps/basic-info';
+import Loading from 'ui/common/Loading';
+import * as Loadable from 'react-loadable';
 
 import { ROLE_ADMINISTRATOR, ROLE_USER } from 'constants/userRoles';
 
 const publicRoutes = [
   {
     path: '/datasets/suggest',
-    component: DatasetSuggestionsPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "datasets" */'datasets/ui/search/SuggestionsPage'),
+      loading: Loading,
+    }),
     exact: true,
     extraProps: {
       title: 'datasets.common.modelName_plural',
@@ -21,7 +18,10 @@ const publicRoutes = [
   },
   {
     path: '/datasets/:filterCode(v.+)?',
-    component: DatasetBrowsePage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "datasets" */'datasets/ui/BrowsePage'),
+      loading: Loading,
+    }),
     exact: true,
     extraProps: {
       title: 'datasets.common.modelName_plural',
@@ -30,7 +30,10 @@ const publicRoutes = [
   },
   {
     path: '/datasets/:uuid([a-z\\-0-9]+)',
-    component: DatasetDisplayPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "datasets" */'datasets/ui/DisplayPage'),
+      loading: Loading,
+    }),
     exact: true,
     extraProps: {
       title: 'datasets.common.modelName_plural',
@@ -43,7 +46,10 @@ const dashboardRoutes = [
 
   {
     path: '/datasets/:filterCode(v.+)?',
-    component: DatasetDashboardPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "datasets" */'datasets/ui/dashboard/DashboardPage'),
+      loading: Loading,
+    }),
     exact: true,
     auth: [ROLE_USER, ROLE_ADMINISTRATOR],
     extraProps: {
@@ -52,7 +58,10 @@ const dashboardRoutes = [
   },
   {
     path: '/datasets/edit',
-    component: DatasetStepper,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "datasets" */'datasets/ui/dashboard/StepperPage'),
+      loading: Loading,
+    }),
     auth: [ROLE_USER, ROLE_ADMINISTRATOR],
     extraProps: {
       title: 'datasets.dashboard.p.stepper.publisher',
@@ -60,20 +69,29 @@ const dashboardRoutes = [
     routes: [
       {
         path: '/',
-        component: BasicInfoStep,
+        component: Loadable({
+          loader: () => import(/* webpackMode:"lazy", webpackChunkName: "datasets" */'datasets/ui/dashboard/dataset-stepper/steps/basic-info'),
+          loading: Loading,
+        }),
         exact: true,
       },
     ],
   },
   {
     path: '/datasets/:uuid([a-z\\-0-9]+)/',
-    component: DatasetStepper,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "datasets" */'datasets/ui/dashboard/StepperPage'),
+      loading: Loading,
+    }),
     auth: [ROLE_USER, ROLE_ADMINISTRATOR],
     extraProps: {
       title: 'datasets.dashboard.p.stepper.publisher',
     },
     routes: [
-      ...datasetSteps,
+      ...Loadable({
+        loader: () => import(/* webpackMode:"lazy", webpackChunkName: "datasets" */'datasets/ui/dashboard/dataset-stepper/steps'),
+        loading: Loading,
+      }),
     ],
   },
 ];

src/descriptorlists/routes.ts

-import DescriptorListDisplayPage from 'descriptorlists/ui/DisplayPage';
-import DescriptorListBrowsePage from 'descriptorlists/ui/BrowsePage';
-import DescriptorListDashboardPage from 'descriptorlists/ui/dashboard/DashboardPage';
-
-import DescriptorListStepper from 'descriptorlists/ui/dashboard/descriptorlist-stepper/StepperPage';
-import DescriptorListBasicStep from 'descriptorlists/ui/dashboard/descriptorlist-stepper/steps/basic-info';
-import descriptorListSteps from 'descriptorlists/ui/dashboard/descriptorlist-stepper/steps';
+import Loading from 'ui/common/Loading';
+import * as Loadable from 'react-loadable';
 
 import { ROLE_ADMINISTRATOR, ROLE_USER } from 'constants/userRoles';
 
@@ -12,7 +7,10 @@ import { ROLE_ADMINISTRATOR, ROLE_USER } from 'constants/userRoles';
 const publicRoutes = [
   {
     path: '/descriptorlists/:filterCode(v.+)?',
-    component: DescriptorListBrowsePage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "descriptorlists" */'descriptorlists/ui/BrowsePage'),
+      loading: Loading,
+    }),
     exact: true,
     extraProps: {
       title: 'descriptorlists.common.modelName_plural',
@@ -21,7 +19,10 @@ const publicRoutes = [
   },
   {
     path: '/descriptorlists/:uuid([a-z\\-0-9]+)',
-    component: DescriptorListDisplayPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "descriptorlists" */'descriptorlists/ui/DisplayPage'),
+      loading: Loading,
+    }),
     exact: true,
     extraProps: {
       title: 'descriptorlists.common.modelName_plural',
@@ -34,7 +35,10 @@ const dashboardRoutes = [
   {
     path: '/descriptorlists/:filterCode(v.+)?',
     exact: true,
-    component: DescriptorListDashboardPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "descriptorlists" */'descriptorlists/ui/dashboard/DashboardPage'),
+      loading: Loading,
+    }),
     auth: [ROLE_USER, ROLE_ADMINISTRATOR],
     extraProps: {
       title: 'My Dashboard',
@@ -42,7 +46,10 @@ const dashboardRoutes = [
   },
   {
     path: '/descriptorlists/edit',
-    component: DescriptorListStepper,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "descriptorlists" */'descriptorlists/ui/dashboard/descriptorlist-stepper/StepperPage'),
+      loading: Loading,
+    }),
     exact: true,
     auth: [ROLE_USER, ROLE_ADMINISTRATOR],
     extraProps: {
@@ -51,20 +58,29 @@ const dashboardRoutes = [
     routes: [
       {
         path: '/',
-        component: DescriptorListBasicStep,
+        component: Loadable({
+          loader: () => import(/* webpackMode:"lazy", webpackChunkName: "descriptorlists" */'descriptorlists/ui/dashboard/descriptorlist-stepper/steps'),
+          loading: Loading,
+        }),
         exact: true,
       },
     ],
   },
   {
     path: '/descriptorlists/:uuid([a-z\\-0-9]+)/',
-    component: DescriptorListStepper,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "descriptorlists" */'descriptorlists/ui/dashboard/descriptorlist-stepper/steps/basic-info'),
+      loading: Loading,
+    }),
     auth: [ROLE_USER, ROLE_ADMINISTRATOR],
     extraProps: {
       title: 'Descriptor list publisher',
     },
     routes: [
-      ...descriptorListSteps,
+      ...Loadable({
+        loader: () => import(/* webpackMode:"lazy", webpackChunkName: "descriptorlists" */'descriptorlists/ui/dashboard/descriptorlist-stepper/steps'),
+        loading: Loading,
+      }),
     ],
   },
 ];

src/descriptors/routes.ts

-import DescriptorBrowsePage from 'descriptors/ui/BrowsePage';
-import DescriptorDisplayPage from 'descriptors/ui/DisplayPage';
-import DescriptorEditPage from 'descriptors/ui/dashboard/EditPage';
-import DescriptorDashboardPage from 'descriptors/ui/dashboard/DashboardPage';
+import Loading from 'ui/common/Loading';
+import * as Loadable from 'react-loadable';
 
 import { ROLE_ADMINISTRATOR, ROLE_USER } from 'constants/userRoles';
 
@@ -9,7 +7,10 @@ import { ROLE_ADMINISTRATOR, ROLE_USER } from 'constants/userRoles';
 const publicRoutes = [
   {
     path: '/descriptors/:filterCode(v.+)?',
-    component: DescriptorBrowsePage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "descriptors" */'descriptors/ui/BrowsePage'),
+      loading: Loading,
+    }),
     exact: true,
     extraProps: {
       title: 'descriptors.common.title',
@@ -18,7 +19,10 @@ const publicRoutes = [
   },
   {
     path: '/descriptors/:uuid([a-z\\-0-9]+)',
-    component: DescriptorDisplayPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "descriptors" */'descriptors/ui/DisplayPage'),
+      loading: Loading,
+    }),
     exact: true,
     extraProps: {
       title: 'descriptors.common.title',
@@ -30,7 +34,10 @@ const publicRoutes = [
 const dashboardRoutes = [
   {
     path: '/descriptors/:filterCode(v.+)?',
-    component: DescriptorDashboardPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "descriptors" */'descriptors/ui/dashboard/DashboardPage'),
+      loading: Loading,
+    }),
     exact: true,
     auth: [ROLE_USER, ROLE_ADMINISTRATOR],
     extraProps: {
@@ -39,13 +46,19 @@ const dashboardRoutes = [
   },
   {
     path: '/descriptors/edit',
-    component: DescriptorEditPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "descriptors" */'descriptors/ui/dashboard/EditPage'),
+      loading: Loading,
+    }),
     auth: [ROLE_USER, ROLE_ADMINISTRATOR],
     exact: true,
   },
   {
     path: '/descriptors/:uuid/edit',
-    component: DescriptorEditPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "descriptors" */'descriptors/ui/dashboard/EditPage'),
+      loading: Loading,
+    }),
     auth: [ROLE_USER, ROLE_ADMINISTRATOR],
     exact: true,
   },

src/geo/routes.ts

-// Root
-import CountryListPage from 'geo/ui/CountryListPage';
-import CountryDisplayPage from 'geo/ui/CountryDisplayPage';
-import RegionListPage from 'geo/ui/RegionListPage';
-import RegionDisplayPage from 'geo/ui/RegionDisplayPage';
+import Loading from 'ui/common/Loading';
+import * as Loadable from 'react-loadable';
 
 const publicRoutes = [
   // Root
   {
     path: '/geo/regions',
-    component: RegionListPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "geo" */'geo/ui/RegionListPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     path: '/geo/region/:isoCode',
-    component: RegionDisplayPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "geo" */'geo/ui/RegionDisplayPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     path: '/iso3166/:isoCode',
-    component: CountryDisplayPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "geo" */'geo/ui/CountryDisplayPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     path: '/iso3166/',
-    component: CountryListPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "geo" */'geo/ui/CountryListPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   // Obsolete
   {
     path: '/geo/:isoCode',
-    component: CountryDisplayPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "geo" */'geo/ui/CountryDisplayPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     path: '/geo/',
-    component: CountryListPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "geo" */'geo/ui/CountryListPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
 

src/institutes/routes.ts

-import InstituteBrowsePage from 'institutes/ui/BrowsePage';
-import InstituteDisplayPage from 'institutes/ui/DisplayPage';
-import InstituteEditPage from 'institutes/ui/dashboard/EditPage';
+import Loading from 'ui/common/Loading';
+import * as Loadable from 'react-loadable';
 
 
 const publicRoutes = [
   {
     path: '/wiews/:filterCode(v.+)?',
-    component: InstituteBrowsePage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "institutes" */'institutes/ui/BrowsePage'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     path: '/wiews/:wiewsCode([a-zA-Z]+[0-9]+)',
-    component: InstituteDisplayPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "institutes" */'institutes/ui/DisplayPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
 ];
@@ -19,7 +24,10 @@ const publicRoutes = [
 const dashboardRoutes = [
   {
     path: '/wiews/:wiewsCode([a-zA-Z]+[0-9]+)/edit',
-    component: InstituteEditPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "institutes" */'institutes/ui/dashboard/EditPage'),
+      loading: Loading,
+    }),
     exact: true,
   },
 ];

src/kpi/routes.ts

-import KpiAdminDashboard from 'kpi/ui/admin/Dashboard';
-import ExecutionDisplay from 'kpi/ui/admin/ExecutionDisplay';
+import Loading from 'ui/common/Loading';
+import * as Loadable from 'react-loadable';
 
 
 const publicRoutes = [
   // not yet
 ];
 
-
 const dashboardRoutes = [
   // not yet
 ];
@@ -14,12 +13,18 @@ const dashboardRoutes = [
 const adminRoutes = [
   {
     path: '/kpi/',
-    component: KpiAdminDashboard,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "kpi" */'kpi/ui/admin/Dashboard'),
+      loading: Loading,
+    }),
     exact: true,
   },
   {
     path: '/kpi/:shortName',
-    component: ExecutionDisplay,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "kpi" */'kpi/ui/admin/ExecutionDisplay'),
+      loading: Loading,
+    }),
     exact: true,
   },
 ];

src/list/routes.ts

-import MyListPage from 'list/ui/BrowsePage';
+import Loading from 'ui/common/Loading';
+import * as Loadable from 'react-loadable';
 
 const publicRoutes = [
   {
     path: '/sel',
-    component: MyListPage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "list" */'list/ui/BrowsePage'),
+      loading: Loading,
+    }),
     exact: true,
   },
 ];

src/partners/routes.ts

-import PartnerBrowsePage from 'partners/ui/BrowsePage';
-import PartnerDisplayPage from 'partners/ui/DisplayPage';
-import PartnerEditPage from 'partners/ui/EditPage';
+import Loading from 'ui/common/Loading';
+import * as Loadable from 'react-loadable';
 import { ROLE_ADMINISTRATOR, ROLE_USER } from 'constants/userRoles';
 
 
 const publicRoutes = [
   {
     path: '/partners/:filterCode(v.+)?',
-    component: PartnerBrowsePage,
+    component: Loadable({
+      loader: () => import(/* webpackMode:"lazy", webpackChunkName: "partners" */'partners/ui/BrowsePage'),