Lazy load visualizations

elastic · Nov 23, 2020 · af49c78 · af49c78
1 parent 316c905
commit af49c78
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 16 deletions.
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/gauge/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/gauge/vis.js
@@ -101,4 +101,8 @@ GaugeVisualization.propTypes = {
   getConfig: PropTypes.func,
 };
 
-export const gauge = visWithSplits(GaugeVisualization);
+const gauge = visWithSplits(GaugeVisualization);
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { gauge as default };
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/index.ts b/src/plugins/vis_type_timeseries/public/application/components/vis_types/index.ts
@@ -17,29 +17,31 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { lazy } from 'react';
 
 import { IUiSettingsClient } from 'src/core/public';
 import { PersistedState } from 'src/plugins/visualizations/public';
 
+import { TimeseriesVisParams } from '../../../metrics_fn';
+import { TimeseriesVisData } from '../../../../common/types';
+
 /**
- * TSVB visualizations are not typed yet.
+ * Lazy load each visualization type, since the only one is presented on the screen at the same time.
+ * Disable typescript errors since the components are not typed yet.
  */
 
 // @ts-expect-error
-import { TimeseriesVisualization as timeseries } from './timeseries/vis';
+const timeseries = lazy(() => import('./timeseries/vis'));
 // @ts-expect-error
-import { metric } from './metric/vis';
+const metric = lazy(() => import('./metric/vis'));
 // @ts-expect-error
-import { TopNVisualization as topN } from './top_n/vis';
+const topN = lazy(() => import('./top_n/vis'));
 // @ts-expect-error
-import { TableVis as table } from './table/vis';
+const table = lazy(() => import('./table/vis'));
 // @ts-expect-error
-import { gauge } from './gauge/vis';
+const gauge = lazy(() => import('./gauge/vis'));
 // @ts-expect-error
-import { MarkdownVisualization as markdown } from './markdown/vis';
-import { TimeseriesVisParams } from '../../../metrics_fn';
-import { TimeseriesVisData } from '../../../../common/types';
+const markdown = lazy(() => import('./markdown/vis'));
 
 export const TimeseriesVisTypes: Record<string, React.ComponentType<TimeseriesVisProps>> = {
   timeseries,

diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/markdown/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/markdown/vis.js
@@ -30,7 +30,7 @@ import { isBackgroundInverted } from '../../../lib/set_is_reversed';
 
 const getMarkdownId = (id) => `markdown-${id}`;
 
-export function MarkdownVisualization(props) {
+function MarkdownVisualization(props) {
   const { backgroundColor, model, visData, dateFormat } = props;
   const series = get(visData, `${model.id}.series`, []);
   const variables = convertSeriesToVars(series, model, dateFormat, props.getConfig);
@@ -106,3 +106,7 @@ MarkdownVisualization.propTypes = {
   dateFormat: PropTypes.string,
   getConfig: PropTypes.func,
 };
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { MarkdownVisualization as default };
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/metric/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/metric/vis.js
@@ -95,4 +95,8 @@ MetricVisualization.propTypes = {
   getConfig: PropTypes.func,
 };
 
-export const metric = visWithSplits(MetricVisualization);
+const metric = visWithSplits(MetricVisualization);
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { metric as default };
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/table/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/table/vis.js
@@ -46,7 +46,7 @@ function getColor(rules, colorKey, value) {
   return color;
 }
 
-export class TableVis extends Component {
+class TableVis extends Component {
   constructor(props) {
     super(props);
 
@@ -260,3 +260,7 @@ TableVis.propTypes = {
   pageNumber: PropTypes.number,
   getConfig: PropTypes.func,
 };
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { TableVis as default };
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js
@@ -34,7 +34,7 @@ import { createXaxisFormatter } from '../../lib/create_xaxis_formatter';
 import { STACKED_OPTIONS } from '../../../visualizations/constants';
 import { getCoreStart } from '../../../../services';
 
-export class TimeseriesVisualization extends Component {
+class TimeseriesVisualization extends Component {
   static propTypes = {
     model: PropTypes.object,
     onBrush: PropTypes.func,
@@ -246,3 +246,7 @@ export class TimeseriesVisualization extends Component {
     );
   }
 }
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { TimeseriesVisualization as default };
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/top_n/vis.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/top_n/vis.js
@@ -48,7 +48,7 @@ function sortSeries(visData, model) {
   }, []);
 }
 
-export function TopNVisualization(props) {
+function TopNVisualization(props) {
   const { backgroundColor, model, visData } = props;
 
   const series = sortSeries(visData, model).map((item) => {
@@ -111,3 +111,7 @@ TopNVisualization.propTypes = {
   visData: PropTypes.object,
   getConfig: PropTypes.func,
 };
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { TopNVisualization as default };