From 8bb67f2c6281c88cc11d95f1e30d61f6c3c8622a Mon Sep 17 00:00:00 2001
From: Mikhail Shustov <restrry@gmail.com>
Date: Wed, 29 Apr 2020 12:00:18 +0200
Subject: [PATCH] Slim vis type timeseries (#64631)

* load visualizations code lazily

* load VisEditor lazily
---
 .../application/components/vis_editor.js      |  4 +++
 .../components/vis_editor_lazy.tsx            | 30 +++++++++++++++++++
 .../public/application/editor_controller.js   |  2 +-
 .../vis_type_timeseries/public/metrics_fn.ts  |  2 +-
 .../public/metrics_type.ts                    |  3 +-
 5 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 src/plugins/vis_type_timeseries/public/application/components/vis_editor_lazy.tsx

diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js b/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js
index 7075e86eb56bf..9fdb8ccc919b7 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js
+++ b/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 };
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_editor_lazy.tsx b/src/plugins/vis_type_timeseries/public/application/components/vis_editor_lazy.tsx
new file mode 100644
index 0000000000000..d81bd95d8d771
--- /dev/null
+++ b/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>
+);
diff --git a/src/plugins/vis_type_timeseries/public/application/editor_controller.js b/src/plugins/vis_type_timeseries/public/application/editor_controller.js
index af50d3a06d1fc..f21b5f947bca7 100644
--- a/src/plugins/vis_type_timeseries/public/application/editor_controller.js
+++ b/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) {
diff --git a/src/plugins/vis_type_timeseries/public/metrics_fn.ts b/src/plugins/vis_type_timeseries/public/metrics_fn.ts
index 008b13cce6565..b573225feaab1 100644
--- a/src/plugins/vis_type_timeseries/public/metrics_fn.ts
+++ b/src/plugins/vis_type_timeseries/public/metrics_fn.ts
@@ -20,7 +20,6 @@
 import { get } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { ExpressionFunctionDefinition, KibanaContext, Render } from '../../expressions/public';
-import { PersistedState } from '../../visualizations/public';
 
 // @ts-ignore
 import { metricsRequestHandler } from './request_handler';
@@ -76,6 +75,7 @@ export const createMetricsFn = (): ExpressionFunctionDefinition<
     const params = JSON.parse(args.params);
     const uiStateParams = JSON.parse(args.uiState);
     const savedObjectId = args.savedObjectId;
+    const { PersistedState } = await import('../../visualizations/public');
     const uiState = new PersistedState(uiStateParams);
 
     const response = await metricsRequestHandler({
diff --git a/src/plugins/vis_type_timeseries/public/metrics_type.ts b/src/plugins/vis_type_timeseries/public/metrics_type.ts
index c525ce7fa0b3b..2b0734ceb4d4d 100644
--- a/src/plugins/vis_type_timeseries/public/metrics_type.ts
+++ b/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: {