load VisEditor lazily

Author: mshustov

src/plugins/vis_type_timeseries/public/application/components/vis_editor.js

@@ -240,3 +240,7 @@ VisEditor.propTypes = {
   timeRange: PropTypes.object,
   appState: PropTypes.object,
 };
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { VisEditor as default };

src/plugins/vis_type_timeseries/public/application/components/vis_editor_lazy.tsx

@@ -0,0 +1,30 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { lazy, Suspense } from 'react';
+import { EuiLoadingSpinner } from '@elastic/eui';
+
+// @ts-ignore
+const VisEditorComponent = lazy(() => import('./vis_editor'));
+
+export const VisEditor = (props: any) => (
+  <Suspense fallback={<EuiLoadingSpinner />}>
+    <VisEditorComponent {...props} />
+  </Suspense>
+);

src/plugins/vis_type_timeseries/public/application/editor_controller.js

@@ -21,7 +21,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { fetchIndexPatternFields } from './lib/fetch_fields';
 import { getSavedObjectsClient, getUISettings, getI18n } from '../services';
-import { VisEditor } from './components/vis_editor';
+import { VisEditor } from './components/vis_editor_lazy';
 
 export class EditorController {
   constructor(el, vis, eventEmitter, embeddableHandler) {

src/plugins/vis_type_timeseries/public/metrics_type.ts

@@ -25,6 +25,7 @@ import { EditorController } from './application';
 // @ts-ignore
 import { PANEL_TYPES } from '../common/panel_types';
 import { defaultFeedbackMessage } from '../../kibana_utils/public';
+import { VisEditor } from './application/components/vis_editor_lazy';
 
 export const metricsVisDefinition = {
   name: 'metrics',
@@ -69,7 +70,7 @@ export const metricsVisDefinition = {
       show_legend: 1,
       show_grid: 1,
     },
-    component: require('./application/components/vis_editor').VisEditor,
+    component: VisEditor,
   },
   editor: EditorController,
   options: {