[file upload] lazy load to reduce page load size

x-pack/plugins/file_upload/public/get_file_upload_component.ts

@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { React } from 'react';
+
+let lazyLoadPromise: Promise<React.ComponentType<unknown>>;
+
+export async function getFileUploadComponent(): Promise<React.ComponentType<unknown>> {
+  if (typeof lazyLoadPromise !== 'undefined') {
+    return lazyLoadPromise;
+  }
+
+  lazyLoadPromise = new Promise(async (resolve) => {
+    // @ts-expect-error
+    const { JsonUploadAndParse } = await import('./components/json_upload_and_parse');
+    resolve(JsonUploadAndParse);
+  });
+  return lazyLoadPromise;
+}

x-pack/plugins/file_upload/public/plugin.ts

@@ -4,10 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// @ts-ignore
 import { CoreSetup, CoreStart, Plugin } from 'kibana/server';
-// @ts-ignore
-import { JsonUploadAndParse } from './components/json_upload_and_parse';
+import { getFileUploadComponent } from './get_file_upload_component';
 // @ts-ignore
 import { setupInitServicesAndConstants, startInitServicesAndConstants } from './kibana_services';
 import { IDataPluginServices } from '../../../../src/plugins/data/public';
@@ -35,7 +33,7 @@ export class FileUploadPlugin implements Plugin<FileUploadPluginSetup, FileUploa
   public start(core: CoreStart, plugins: FileUploadPluginStartDependencies) {
     startInitServicesAndConstants(core, plugins);
     return {
-      JsonUploadAndParse,
+      getFileUploadComponent,
     };
   }
 }

x-pack/plugins/maps/public/classes/layers/file_upload_wizard/wizard.tsx

@@ -39,10 +39,12 @@ export class ClientFileCreateSourceEditor extends Component<RenderWizardArgument
 
   state = {
     indexingStage: null,
+    fileUploadComponent: null,
   };
 
   componentDidMount() {
     this._isMounted = true;
+    this._loadFileUploadComponent();
   }
 
   componentWillUnmount() {
@@ -59,6 +61,13 @@ export class ClientFileCreateSourceEditor extends Component<RenderWizardArgument
     }
   }
 
+  async _loadFileUploadComponent() {
+    const fileUploadComponent = await getFileUploadComponent();
+    if (this._isMounted) {
+      this.setState({ fileUploadComponent });
+    }
+  }
+
   _onFileUpload = (geojsonFile: FeatureCollection, name: string) => {
     if (!this._isMounted) {
       return;
@@ -145,7 +154,11 @@ export class ClientFileCreateSourceEditor extends Component<RenderWizardArgument
   };
 
   render() {
-    const FileUpload = getFileUploadComponent();
+    if (!this.state.fileUploadComponent) {
+      return null;
+    }
+
+    const FileUpload = this.state.fileUploadComponent;
     return (
       <EuiPanel>
         <FileUpload

x-pack/plugins/maps/public/kibana_services.d.ts

@@ -13,7 +13,7 @@ import { EmbeddableStart } from '../../../../src/plugins/embeddable/public';
 
 export function getLicenseId(): any;
 export function getInspector(): any;
-export function getFileUploadComponent(): any;
+export function getFileUploadComponent(): Promise<any>;
 export function getIndexPatternSelectComponent(): any;
 export function getHttp(): any;
 export function getTimeFilter(): any;

x-pack/plugins/maps/public/kibana_services.js

@@ -33,8 +33,8 @@ export const getInspector = () => {
 
 let fileUploadPlugin;
 export const setFileUpload = (fileUpload) => (fileUploadPlugin = fileUpload);
-export const getFileUploadComponent = () => {
-  return fileUploadPlugin.JsonUploadAndParse;
+export const getFileUploadComponent = async () => {
+  return await fileUploadPlugin.getFileUploadComponent();
 };
 
 let uiSettings;