[Maps] lazy load legacy visualization components (#119495)

* [Maps] lazy load legacy visualization components * eslint * tslint
elastic · Nov 24, 2021 · c56ede0 · c56ede0
1 parent 7f803d0
commit c56ede0
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 38 deletions.
diff --git a/x-pack/plugins/maps/public/legacy_visualizations/region_map/region_map_editor.tsx b/x-pack/plugins/maps/public/legacy_visualizations/region_map/region_map_editor.tsx
@@ -14,7 +14,7 @@ import { extractLayerDescriptorParams } from './utils';
 import { RegionMapVisParams } from './types';
 import { title } from './region_map_vis_type';
 
-export function RegionMapEditor(props: VisEditorOptionsProps) {
+function RegionMapEditor(props: VisEditorOptionsProps) {
   const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
 
@@ -32,3 +32,7 @@ export function RegionMapEditor(props: VisEditorOptionsProps) {
 
   return <ViewInMaps onClick={onClick} visualizationLabel={title} />;
 }
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export default RegionMapEditor;
diff --git a/x-pack/plugins/maps/public/legacy_visualizations/region_map/region_map_renderer.tsx b/x-pack/plugins/maps/public/legacy_visualizations/region_map/region_map_renderer.tsx
@@ -5,13 +5,17 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { lazy } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import type { ExpressionRenderDefinition } from 'src/plugins/expressions';
-import { RegionMapVisRenderValue } from './region_map_fn';
-import { RegionMapVisualization } from './region_map_visualization';
+import type { RegionMapVisRenderValue } from './region_map_fn';
+import { LazyWrapper } from '../../lazy_wrapper';
 import { REGION_MAP_RENDER } from './types';
 
+const getLazyComponent = () => {
+  return lazy(() => import('./region_map_visualization'));
+};
+
 export const regionMapRenderer = {
   name: REGION_MAP_RENDER,
   reuseDomNode: true,
@@ -20,17 +24,16 @@ export const regionMapRenderer = {
       unmountComponentAtNode(domNode);
     });
 
-    render(
-      <RegionMapVisualization
-        onInitialRenderComplete={() => {
-          handlers.done();
-        }}
-        filters={filters}
-        query={query}
-        timeRange={timeRange}
-        visConfig={visConfig}
-      />,
-      domNode
-    );
+    const props = {
+      onInitialRenderComplete: () => {
+        handlers.done();
+      },
+      filters,
+      query,
+      timeRange,
+      visConfig,
+    };
+
+    render(<LazyWrapper getLazyComponent={getLazyComponent} lazyComponentProps={props} />, domNode);
   },
 } as ExpressionRenderDefinition<RegionMapVisRenderValue>;
diff --git a/...zations/region_map/region_map_vis_type.ts → ...ations/region_map/region_map_vis_type.tsx b/...zations/region_map/region_map_vis_type.ts → ...ations/region_map/region_map_vis_type.tsx
@@ -5,16 +5,25 @@
  * 2.0.
  */
 
+import React, { lazy } from 'react';
 import { i18n } from '@kbn/i18n';
+import type { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
 import { VisTypeDefinition } from '../../../../../../src/plugins/visualizations/public';
 import { toExpressionAst } from './to_ast';
 import { REGION_MAP_VIS_TYPE, RegionMapVisParams } from './types';
-import { RegionMapEditor } from './region_map_editor';
+import { LazyWrapper } from '../../lazy_wrapper';
 
 export const title = i18n.translate('xpack.maps.regionMapMap.vis.title', {
   defaultMessage: 'Region Map',
 });
 
+const LazyRegionMapEditor = function (props: VisEditorOptionsProps) {
+  const getLazyComponent = () => {
+    return lazy(() => import('./region_map_editor'));
+  };
+  return <LazyWrapper getLazyComponent={getLazyComponent} lazyComponentProps={props} />;
+};
+
 export const regionMapVisType = {
   name: REGION_MAP_VIS_TYPE,
   title,
@@ -27,7 +36,7 @@ export const regionMapVisType = {
       {
         name: '',
         title: '',
-        editor: RegionMapEditor,
+        editor: LazyRegionMapEditor,
       },
     ],
   },

diff --git a/x-pack/plugins/maps/public/legacy_visualizations/region_map/region_map_visualization.tsx b/x-pack/plugins/maps/public/legacy_visualizations/region_map/region_map_visualization.tsx
@@ -19,7 +19,7 @@ interface Props {
   onInitialRenderComplete: () => void;
 }
 
-export function RegionMapVisualization(props: Props) {
+function RegionMapVisualization(props: Props) {
   const mapCenter = {
     lat: props.visConfig.mapCenter[0],
     lon: props.visConfig.mapCenter[1],
@@ -45,3 +45,7 @@ export function RegionMapVisualization(props: Props) {
     />
   );
 }
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export default RegionMapVisualization;
diff --git a/x-pack/plugins/maps/public/legacy_visualizations/tile_map/tile_map_editor.tsx b/x-pack/plugins/maps/public/legacy_visualizations/tile_map/tile_map_editor.tsx
@@ -14,7 +14,7 @@ import { extractLayerDescriptorParams } from './utils';
 import { TileMapVisParams } from './types';
 import { title } from './tile_map_vis_type';
 
-export function TileMapEditor(props: VisEditorOptionsProps) {
+function TileMapEditor(props: VisEditorOptionsProps) {
   const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
 
@@ -32,3 +32,7 @@ export function TileMapEditor(props: VisEditorOptionsProps) {
 
   return <ViewInMaps onClick={onClick} visualizationLabel={title} />;
 }
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export default TileMapEditor;
diff --git a/x-pack/plugins/maps/public/legacy_visualizations/tile_map/tile_map_renderer.tsx b/x-pack/plugins/maps/public/legacy_visualizations/tile_map/tile_map_renderer.tsx
@@ -5,13 +5,17 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { lazy } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import type { ExpressionRenderDefinition } from 'src/plugins/expressions';
-import { TileMapVisRenderValue } from './tile_map_fn';
-import { TileMapVisualization } from './tile_map_visualization';
+import type { TileMapVisRenderValue } from './tile_map_fn';
+import { LazyWrapper } from '../../lazy_wrapper';
 import { TILE_MAP_RENDER } from './types';
 
+const getLazyComponent = () => {
+  return lazy(() => import('./tile_map_visualization'));
+};
+
 export const tileMapRenderer = {
   name: TILE_MAP_RENDER,
   reuseDomNode: true,
@@ -20,17 +24,16 @@ export const tileMapRenderer = {
       unmountComponentAtNode(domNode);
     });
 
-    render(
-      <TileMapVisualization
-        onInitialRenderComplete={() => {
-          handlers.done();
-        }}
-        filters={filters}
-        query={query}
-        timeRange={timeRange}
-        visConfig={visConfig}
-      />,
-      domNode
-    );
+    const props = {
+      onInitialRenderComplete: () => {
+        handlers.done();
+      },
+      filters,
+      query,
+      timeRange,
+      visConfig,
+    };
+
+    render(<LazyWrapper getLazyComponent={getLazyComponent} lazyComponentProps={props} />, domNode);
   },
 } as ExpressionRenderDefinition<TileMapVisRenderValue>;
diff --git a/...ualizations/tile_map/tile_map_vis_type.ts → ...alizations/tile_map/tile_map_vis_type.tsx b/...ualizations/tile_map/tile_map_vis_type.ts → ...alizations/tile_map/tile_map_vis_type.tsx
@@ -5,16 +5,25 @@
  * 2.0.
  */
 
+import React, { lazy } from 'react';
 import { i18n } from '@kbn/i18n';
+import type { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
 import { VisTypeDefinition } from '../../../../../../src/plugins/visualizations/public';
 import { toExpressionAst } from './to_ast';
 import { MapTypes, TileMapVisParams, TILE_MAP_VIS_TYPE } from './types';
-import { TileMapEditor } from './tile_map_editor';
+import { LazyWrapper } from '../../lazy_wrapper';
 
 export const title = i18n.translate('xpack.maps.tileMap.vis.title', {
   defaultMessage: 'Coordinate Map',
 });
 
+const LazyTileMapEditor = function (props: VisEditorOptionsProps) {
+  const getLazyComponent = () => {
+    return lazy(() => import('./tile_map_editor'));
+  };
+  return <LazyWrapper getLazyComponent={getLazyComponent} lazyComponentProps={props} />;
+};
+
 export const tileMapVisType = {
   name: TILE_MAP_VIS_TYPE,
   title,
@@ -27,7 +36,7 @@ export const tileMapVisType = {
       {
         name: '',
         title: '',
-        editor: TileMapEditor,
+        editor: LazyTileMapEditor,
       },
     ],
   },

diff --git a/x-pack/plugins/maps/public/legacy_visualizations/tile_map/tile_map_visualization.tsx b/x-pack/plugins/maps/public/legacy_visualizations/tile_map/tile_map_visualization.tsx
@@ -19,7 +19,7 @@ interface Props {
   onInitialRenderComplete: () => void;
 }
 
-export function TileMapVisualization(props: Props) {
+function TileMapVisualization(props: Props) {
   const mapCenter = {
     lat: props.visConfig.mapCenter[0],
     lon: props.visConfig.mapCenter[1],
@@ -45,3 +45,7 @@ export function TileMapVisualization(props: Props) {
     />
   );
 }
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export default TileMapVisualization;