load exposed components lazily

x-pack/plugins/triggers_actions_ui/public/application/app.tsx

@@ -3,7 +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, { lazy } from 'react';
+import React, { lazy, Suspense } from 'react';
+import { EuiLoadingSpinner } from '@elastic/eui';
 import { Switch, Route, Redirect, HashRouter, RouteComponentProps } from 'react-router-dom';
 import {
   ChromeStart,
@@ -68,12 +69,12 @@ export const AppWithoutRouter = ({ sectionsRegex }: { sectionsRegex: string }) =
     <Switch>
       <Route
         path={`${BASE_PATH}/:section(${sectionsRegex})`}
-        component={suspendedComponentWithProps<RouteComponentProps<any>>(TriggersActionsUIHome)}
+        component={suspendedComponentWithProps(TriggersActionsUIHome)}
       />
       {canShowAlerts && (
         <Route
           path={routeToAlertDetails}
-          component={suspendedComponentWithProps<RouteComponentProps<any>>(AlertDetailsRoute)}
+          component={suspendedComponentWithProps(AlertDetailsRoute)}
         />
       )}
       <Redirect from={`${BASE_PATH}`} to={`${BASE_PATH}/${DEFAULT_SECTION}`} />

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/index.ts

@@ -4,6 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { ConnectorAddFlyout } from './connector_add_flyout';
-export { ConnectorEditFlyout } from './connector_edit_flyout';
-export { ActionForm } from './action_form';
+import { lazy } from 'react';
+import { suspendedComponentWithProps } from '../../lib/suspended_component_with_props';
+
+export const ConnectorAddFlyout = suspendedComponentWithProps(
+  lazy(() => import('./connector_add_flyout'))
+);
+export const ConnectorEditFlyout = suspendedComponentWithProps(
+  lazy(() => import('./connector_edit_flyout'))
+);
+export const ActionForm = suspendedComponentWithProps(lazy(() => import('./action_form')));

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx

@@ -37,9 +37,9 @@ import {
 import { AlertInstancesRouteWithApi } from './alert_instances_route';
 import { ViewInApp } from './view_in_app';
 import { PLUGIN } from '../../../constants/plugin';
+import { AlertEdit } from '../../alert_form';
 import { AlertsContextProvider } from '../../../context/alerts_context';
 import { routeToAlertDetails } from '../../../constants';
-import { AlertEdit } from '../../../sections';
 
 type AlertDetailsProps = {
   alert: Alert;

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_form.tsx

@@ -36,7 +36,7 @@ import { AlertReducerAction } from './alert_reducer';
 import { AlertTypeModel, Alert, IErrorObject, AlertAction, AlertTypeIndex } from '../../../types';
 import { getTimeOptions } from '../../../common/lib/get_time_options';
 import { useAlertsContext } from '../../context/alerts_context';
-import { ActionForm } from '../action_connector_form/action_form';
+import { ActionForm } from '../action_connector_form';
 
 export function validateBaseProperties(alertObject: Alert) {
   const validationResult = { errors: {} };

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/index.tsx

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { lazy } from 'react';
+import { suspendedComponentWithProps } from '../../lib/suspended_component_with_props';
+
+export const AlertAdd = suspendedComponentWithProps(lazy(() => import('./alert_add')));
+export const AlertEdit = suspendedComponentWithProps(lazy(() => import('./alert_edit')));

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_list/components/alerts_list.tsx

@@ -25,7 +25,7 @@ import { isEmpty } from 'lodash';
 import { AlertsContextProvider } from '../../../context/alerts_context';
 import { useAppDependencies } from '../../../app_context';
 import { ActionType, Alert, AlertTableItem, AlertTypeIndex, Pagination } from '../../../../types';
-import { AlertAdd } from '../../../sections';
+import { AlertAdd } from '../../alert_form';
 import { BulkOperationPopover } from '../../common/components/bulk_operation_popover';
 import { AlertQuickEditButtonsWithApi as AlertQuickEditButtons } from '../../common/components/alert_quick_edit_buttons';
 import { CollapsedItemActionsWithApi as CollapsedItemActions } from './collapsed_item_actions';

x-pack/plugins/triggers_actions_ui/public/index.ts

@@ -9,13 +9,13 @@ import { Plugin } from './plugin';
 
 export { AlertsContextProvider } from './application/context/alerts_context';
 export { ActionsConnectorsContextProvider } from './application/context/actions_connectors_context';
+export { AlertAdd } from './application/sections/alert_form';
+export { ActionForm } from './application/sections/action_connector_form';
 export { AlertAction, Alert, AlertTypeModel, ActionType } from './types';
 export {
-  ActionForm,
-  AlertAdd,
   ConnectorAddFlyout,
   ConnectorEditFlyout,
-} from './application/sections';
+} from './application/sections/action_connector_form';
 
 export function plugin(ctx: PluginInitializerContext) {
   return new Plugin(ctx);