lazy load sections

gmmorris · May 5, 2020 · 20e11cb · 20e11cb
1 parent ab4b5eb
commit 20e11cb
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 9 deletions.
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/app.tsx b/x-pack/plugins/triggers_actions_ui/public/application/app.tsx
@@ -3,8 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React from 'react';
-import { Switch, Route, Redirect, HashRouter } from 'react-router-dom';
+import React, { lazy, Suspense } from 'react';
+import { Switch, Route, Redirect, HashRouter, RouteComponentProps } from 'react-router-dom';
 import {
   ChromeStart,
   DocLinksStart,
@@ -15,17 +15,21 @@ import {
   ChromeBreadcrumb,
   CoreStart,
 } from 'kibana/public';
+import { EuiLoadingSpinner } from '@elastic/eui';
 import { BASE_PATH, Section, routeToAlertDetails } from './constants';
-import { TriggersActionsUIHome } from './home';
 import { AppContextProvider, useAppDependencies } from './app_context';
 import { hasShowAlertsCapability } from './lib/capabilities';
 import { ActionTypeModel, AlertTypeModel } from '../types';
 import { TypeRegistry } from './type_registry';
-import { AlertDetailsRouteWithApi as AlertDetailsRoute } from './sections/alert_details/components/alert_details_route';
 import { ChartsPluginStart } from '../../../../../src/plugins/charts/public';
 import { DataPublicPluginStart } from '../../../../../src/plugins/data/public';
 import { PluginStartContract as AlertingStart } from '../../../alerting/public';
 
+const TriggersActionsUIHome = lazy(() => import('./home'));
+const AlertDetailsRoute = lazy(() =>
+  import('./sections/alert_details/components/alert_details_route')
+);
+
 export interface AppDeps {
   dataPlugin: DataPublicPluginStart;
   charts: ChartsPluginStart;
@@ -62,9 +66,24 @@ export const AppWithoutRouter = ({ sectionsRegex }: { sectionsRegex: string }) =
   const DEFAULT_SECTION: Section = canShowAlerts ? 'alerts' : 'connectors';
   return (
     <Switch>
-      <Route path={`${BASE_PATH}/:section(${sectionsRegex})`} component={TriggersActionsUIHome} />
-      {canShowAlerts && <Route path={routeToAlertDetails} component={AlertDetailsRoute} />}
+      <Route
+        path={`${BASE_PATH}/:section(${sectionsRegex})`}
+        component={suspendedRouteComponent(TriggersActionsUIHome)}
+      />
+      {canShowAlerts && (
+        <Route path={routeToAlertDetails} component={suspendedRouteComponent(AlertDetailsRoute)} />
+      )}
       <Redirect from={`${BASE_PATH}`} to={`${BASE_PATH}/${DEFAULT_SECTION}`} />
     </Switch>
   );
 };
+
+function suspendedRouteComponent<T = unknown>(
+  RouteComponent: React.ComponentType<RouteComponentProps<T>>
+) {
+  return (props: RouteComponentProps<T>) => (
+    <Suspense fallback={<EuiLoadingSpinner />}>
+      <RouteComponent {...props} />
+    </Suspense>
+  );
+}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/home.tsx b/x-pack/plugins/triggers_actions_ui/public/application/home.tsx
@@ -167,3 +167,6 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
     </EuiPageBody>
   );
 };
+
+// eslint-disable-next-line import/no-default-export
+export { TriggersActionsUIHome as default };
diff --git a/...s_actions_ui/public/application/sections/alert_details/components/alert_details_route.tsx b/...s_actions_ui/public/application/sections/alert_details/components/alert_details_route.tsx
@@ -118,6 +118,6 @@ export async function getAlertData(
   }
 }
 
-export const AlertDetailsRouteWithApi = withActionOperations(
-  withBulkAlertOperations(AlertDetailsRoute)
-);
+const AlertDetailsRouteWithApi = withActionOperations(withBulkAlertOperations(AlertDetailsRoute));
+// eslint-disable-next-line import/no-default-export
+export { AlertDetailsRouteWithApi as default };