[file upload] lazy load to reduce page load size (#74967)

* [file upload] lazy load to reduce page load size

* tslint

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

@@ -0,0 +1,38 @@
+/*
+ * 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';
+import { FeatureCollection } from 'geojson';
+
+export interface FileUploadComponentProps {
+  appName: string;
+  isIndexingTriggered: boolean;
+  onFileUpload: (geojsonFile: FeatureCollection, name: string) => void;
+  onFileRemove: () => void;
+  onIndexReady: (indexReady: boolean) => void;
+  transformDetails: string;
+  onIndexingComplete: (indexResponses: {
+    indexDataResp: unknown;
+    indexPatternResp: unknown;
+  }) => void;
+}
+
+let lazyLoadPromise: Promise<React.ComponentType<FileUploadComponentProps>>;
+
+export async function getFileUploadComponent(): Promise<
+  React.ComponentType<FileUploadComponentProps>
+> {
+  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/index.ts

@@ -9,3 +9,5 @@ import { FileUploadPlugin } from './plugin';
 export function plugin() {
   return new FileUploadPlugin();
 }
+
+export { FileUploadComponentProps } from './get_file_upload_component';

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

@@ -19,6 +19,7 @@ import { VectorLayer } from '../../layers/vector_layer/vector_layer';
 // @ts-expect-error
 import { createDefaultLayerDescriptor } from '../../sources/es_search_source';
 import { RenderWizardArguments } from '../../layers/layer_wizard_registry';
+import { FileUploadComponentProps } from '../../../../../file_upload/public';
 
 export const INDEX_SETUP_STEP_ID = 'INDEX_SETUP_STEP_ID';
 export const INDEXING_STEP_ID = 'INDEXING_STEP_ID';
@@ -32,17 +33,20 @@ enum INDEXING_STAGE {
 
 interface State {
   indexingStage: INDEXING_STAGE | null;
+  fileUploadComponent: React.ComponentType<FileUploadComponentProps> | null;
 }
 
 export class ClientFileCreateSourceEditor extends Component<RenderWizardArguments, State> {
   private _isMounted: boolean = false;
 
-  state = {
+  state: State = {
     indexingStage: null,
+    fileUploadComponent: null,
   };
 
   componentDidMount() {
     this._isMounted = true;
+    this._loadFileUploadComponent();
   }
 
   componentWillUnmount() {
@@ -59,6 +63,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 +156,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

@@ -3,17 +3,19 @@
  * 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 { DataPublicPluginStart } from 'src/plugins/data/public';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { IndexPatternsService } from 'src/plugins/data/public/index_patterns';
 import { NavigateToAppOptions } from 'kibana/public';
 import { MapsConfigType } from '../config';
 import { MapsLegacyConfigType } from '../../../../src/plugins/maps_legacy/public';
 import { EmbeddableStart } from '../../../../src/plugins/embeddable/public';
+import { FileUploadComponentProps } from '../../file_upload/public';
 
 export function getLicenseId(): any;
 export function getInspector(): any;
-export function getFileUploadComponent(): any;
+export function getFileUploadComponent(): Promise<React.ComponentType<FileUploadComponentProps>>;
 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;