Lazy load output flyout to save bundle size

elastic · Dec 6, 2023 · 08f3d12 · 08f3d12
1 parent e85edf3
commit 08f3d12
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/...fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx b/...fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx
@@ -701,3 +701,7 @@ export const EditOutputFlyout: React.FunctionComponent<EditOutputFlyoutProps> =
     </EuiFlyout>
   );
 };
+
+// default export to support React.lazy
+// eslint-disable-next-line import/no-default-export
+export default EditOutputFlyout;
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/index.tsx
@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import React, { useCallback } from 'react';
-import { EuiPortal } from '@elastic/eui';
+import React, { Suspense, useCallback } from 'react';
+import { EuiLoadingSpinner, EuiPortal } from '@elastic/eui';
 import { useHistory, Redirect } from 'react-router-dom';
 import { Routes, Route } from '@kbn/shared-ux-router';
 
@@ -27,12 +27,13 @@ import { FleetServerFlyout } from '../../components';
 import { SettingsPage } from './components/settings_page';
 import { withConfirmModalProvider } from './hooks/use_confirm_modal';
 import { FleetServerHostsFlyout } from './components/fleet_server_hosts_flyout';
-import { EditOutputFlyout } from './components/edit_output_flyout';
 import { useDeleteOutput, useDeleteFleetServerHost, useDeleteProxy } from './hooks';
 import { EditDownloadSourceFlyout } from './components/download_source_flyout';
 import { useDeleteDownloadSource } from './components/download_source_flyout/use_delete_download_source';
 import { FleetProxyFlyout } from './components/edit_fleet_proxy_flyout';
 
+const EditOutputFlyout = React.lazy(() => import('./components/edit_output_flyout'));
+
 function useSettingsAppData() {
   const outputs = useGetOutputs();
   const fleetServerHosts = useGetFleetServerHosts();
@@ -123,7 +124,9 @@ export const SettingsApp = withConfirmModalProvider(() => {
         </Route>
         <Route path={FLEET_ROUTING_PATHS.settings_create_outputs}>
           <EuiPortal>
-            <EditOutputFlyout proxies={proxies.data.items} onClose={onCloseCallback} />
+            <Suspense fallback={<EuiLoadingSpinner />}>
+              <EditOutputFlyout proxies={proxies.data.items} onClose={onCloseCallback} />
+            </Suspense>
           </EuiPortal>
         </Route>
         <Route path={FLEET_ROUTING_PATHS.settings_create_fleet_proxy}>