add lazy loading

mattkime · mattkime · commit c9d68350aae1 · 2021-08-05T09:17:49.000-05:00
diff --git a/src/plugins/index_pattern_editor/public/components/empty_prompts/empty_index_pattern_prompt/empty_index_pattern_prompt.tsx b/src/plugins/index_pattern_editor/public/components/empty_prompts/empty_index_pattern_prompt/empty_index_pattern_prompt.tsx
@@ -21,13 +21,13 @@ interface Props {
   indexPatternsIntroUrl: string;
 }
 
+const Illustration = lazy(() => import('./assets/index_pattern_illustration'));
+
 export const EmptyIndexPatternPrompt = ({
   goToCreate,
   canSaveIndexPattern,
   indexPatternsIntroUrl,
 }: Props) => {
-  const Illustration = lazy(() => import('./assets/index_pattern_illustration'));
-
   return (
     <EuiPageContent
       data-test-subj="emptyIndexPatternPrompt"
diff --git a/src/plugins/index_pattern_editor/public/components/index.ts b/src/plugins/index_pattern_editor/public/components/index.ts
@@ -11,8 +11,6 @@ export {
   Props as IndexPatternEditorFlyoutContentProps,
 } from './index_pattern_editor_flyout_content';
 
-export { IndexPatternFlyoutContentContainer } from './index_pattern_flyout_content_container';
-
 export { IndexPatternEditor } from './index_pattern_editor';
 
 export { schema } from './form_schema';
diff --git a/src/plugins/index_pattern_editor/public/components/index_pattern_editor.tsx b/src/plugins/index_pattern_editor/public/components/index_pattern_editor.tsx
@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { EuiFlyout } from '@elastic/eui';
-import { IndexPatternFlyoutContentContainer } from './index_pattern_flyout_content_container';
+import { IndexPatternEditorLazy } from './index_pattern_editor_lazy';
 import { IndexPatternEditorContext, IndexPatternEditorProps } from '../types';
 import { createKibanaReactContext } from '../shared_imports';
 import './index_pattern_editor.scss';
@@ -31,7 +31,7 @@ export const IndexPatternEditor = ({
   return (
     <KibanaReactContextProvider>
       <EuiFlyout onClose={() => {}} hideCloseButton={true} size="l">
-        <IndexPatternFlyoutContentContainer
+        <IndexPatternEditorLazy
           onSave={onSave}
           onCancel={onCancel}
           defaultTypeIsRollup={defaultTypeIsRollup}
diff --git a/src/plugins/index_pattern_editor/public/components/index_pattern_editor_lazy.tsx b/src/plugins/index_pattern_editor/public/components/index_pattern_editor_lazy.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { lazy, Suspense } from 'react';
+import { EuiLoadingSpinner } from '@elastic/eui';
+
+import { IndexPatternEditorProps } from '../types';
+
+const IndexPatternFlyoutContentContainer = lazy(
+  () => import('./index_pattern_flyout_content_container')
+);
+
+export const IndexPatternEditorLazy = (props: IndexPatternEditorProps) => (
+  <Suspense fallback={<EuiLoadingSpinner size="xl" />}>
+    <IndexPatternFlyoutContentContainer {...props} />
+  </Suspense>
+);
diff --git a/src/plugins/index_pattern_editor/public/components/index_pattern_flyout_content_container.tsx b/src/plugins/index_pattern_editor/public/components/index_pattern_flyout_content_container.tsx
@@ -13,7 +13,7 @@ import { IndexPatternSpec, useKibana } from '../shared_imports';
 import { IndexPatternEditorFlyoutContent } from './index_pattern_editor_flyout_content';
 import { IndexPatternEditorContext, IndexPatternEditorProps } from '../types';
 
-export const IndexPatternFlyoutContentContainer = ({
+const IndexPatternFlyoutContentContainer = ({
   onSave,
   onCancel = () => {},
   defaultTypeIsRollup,
@@ -51,3 +51,6 @@ export const IndexPatternFlyoutContentContainer = ({
     />
   );
 };
+
+/* eslint-disable import/no-default-export */
+export default IndexPatternFlyoutContentContainer;
diff --git a/src/plugins/index_pattern_editor/public/index.ts b/src/plugins/index_pattern_editor/public/index.ts
@@ -20,7 +20,7 @@
 
 import { IndexPatternEditorPlugin } from './plugin';
 
-export { PluginStart as IndexPatternEditorStart, IndexPatternEditorProps } from './types';
+export type { PluginStart as IndexPatternEditorStart, IndexPatternEditorProps } from './types';
 
 export function plugin() {
   return new IndexPatternEditorPlugin();
diff --git a/src/plugins/index_pattern_editor/public/open_editor.tsx b/src/plugins/index_pattern_editor/public/open_editor.tsx
@@ -18,7 +18,7 @@ import {
 } from './shared_imports';
 
 import { CloseEditor, IndexPatternEditorContext, IndexPatternEditorProps } from './types';
-import { IndexPatternFlyoutContentContainer } from './components/index_pattern_flyout_content_container';
+import { IndexPatternEditorLazy } from './components/index_pattern_editor_lazy';
 
 interface Dependencies {
   core: CoreStart;
@@ -67,7 +67,7 @@ export const getEditorOpener = ({ core, indexPatternService }: Dependencies) =>
       toMountPoint(
         <KibanaReactContextProvider>
           <I18nProvider>
-            <IndexPatternFlyoutContentContainer
+            <IndexPatternEditorLazy
               onSave={onSaveIndexPattern}
               onCancel={() => {
                 closeEditor();
diff --git a/src/plugins/index_pattern_editor/public/plugin.tsx b/src/plugins/index_pattern_editor/public/plugin.tsx
@@ -17,7 +17,7 @@ import {
   IndexPatternEditorProps,
 } from './types';
 import { getEditorOpener } from './open_editor';
-import { IndexPatternEditor } from './components';
+import { IndexPatternEditor } from './components/index_pattern_editor';
 
 export class IndexPatternEditorPlugin
   implements Plugin<PluginSetup, PluginStart, SetupPlugins, StartPlugins> {
