Skip to content

Commit

Permalink
[file upload] lazy load to reduce page load size
Browse files Browse the repository at this point in the history
  • Loading branch information
nreese committed Aug 13, 2020
1 parent 6a85e89 commit becc56f
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 8 deletions.
22 changes: 22 additions & 0 deletions x-pack/plugins/file_upload/public/get_file_upload_component.ts
Original file line number Diff line number Diff line change
@@ -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;
}
6 changes: 2 additions & 4 deletions x-pack/plugins/file_upload/public/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -35,7 +33,7 @@ export class FileUploadPlugin implements Plugin<FileUploadPluginSetup, FileUploa
public start(core: CoreStart, plugins: FileUploadPluginStartDependencies) {
startInitServicesAndConstants(core, plugins);
return {
JsonUploadAndParse,
getFileUploadComponent,
};
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,12 @@ export class ClientFileCreateSourceEditor extends Component<RenderWizardArgument

state = {
indexingStage: null,
fileUploadComponent: null,
};

componentDidMount() {
this._isMounted = true;
this._loadFileUploadComponent();
}

componentWillUnmount() {
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/maps/public/kibana_services.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions x-pack/plugins/maps/public/kibana_services.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit becc56f

Please sign in to comment.