[maps] remove LazyWrapper (#182612)

PR replaces LazyWrapper component with `dynamic`

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/maps/public/inspector/map_adapter/map_inspector_view.tsx

@@ -5,14 +5,10 @@
  * 2.0.
  */
 
-import React, { lazy } from 'react';
+import React from 'react';
 import type { Adapters } from '@kbn/inspector-plugin/public';
 import { i18n } from '@kbn/i18n';
-import { LazyWrapper } from '../../lazy_wrapper';
-
-const getLazyComponent = () => {
-  return lazy(() => import('./map_view_component'));
-};
+import { dynamic } from '@kbn/shared-ux-utility';
 
 export const MapInspectorView = {
   title: i18n.translate('xpack.maps.inspector.mapDetailsViewTitle', {
@@ -26,6 +22,12 @@ export const MapInspectorView = {
     return Boolean(adapters.map);
   },
   component: (props: { adapters: Adapters }) => {
-    return <LazyWrapper getLazyComponent={getLazyComponent} lazyComponentProps={props} />;
+    const Component = dynamic(async () => {
+      const { MapViewComponent } = await import('./map_view_component');
+      return {
+        default: MapViewComponent,
+      };
+    });
+    return <Component {...props} />;
   },
 };

x-pack/plugins/maps/public/inspector/map_adapter/map_view_component.tsx

@@ -19,7 +19,7 @@ interface State {
   style: string;
 }
 
-class MapViewComponent extends Component<Props, State> {
+export class MapViewComponent extends Component<Props, State> {
   state: State = this.props.adapters.map.getMapState();
 
   _onMapChange = () => {
@@ -45,7 +45,3 @@ class MapViewComponent extends Component<Props, State> {
     );
   }
 }
-
-// default export required for React.Lazy
-// eslint-disable-next-line import/no-default-export
-export default MapViewComponent;

x-pack/plugins/maps/public/inspector/vector_tile_adapter/components/vector_tile_inspector.test.tsx

@@ -13,7 +13,7 @@ jest.mock('./tile_request_tab', () => ({
 
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import VectorTileInspector, { RESPONSE_VIEW_ID } from './vector_tile_inspector';
+import { RESPONSE_VIEW_ID, VectorTileInspector } from './vector_tile_inspector';
 import { VectorTileAdapter } from '../vector_tile_adapter';
 
 describe('VectorTileInspector', () => {

x-pack/plugins/maps/public/inspector/vector_tile_adapter/components/vector_tile_inspector.tsx

@@ -42,7 +42,7 @@ interface State {
   layerOptions: Array<EuiComboBoxOptionOption<string>>;
 }
 
-class VectorTileInspector extends Component<InspectorViewProps, State> {
+export class VectorTileInspector extends Component<InspectorViewProps, State> {
   private _isMounted = false;
 
   constructor(props: InspectorViewProps) {
@@ -335,7 +335,3 @@ function getTileResponse(tileRequest: TileRequest) {
       }
     : undefined;
 }
-
-// default export required for React.Lazy
-// eslint-disable-next-line import/no-default-export
-export default VectorTileInspector;

x-pack/plugins/maps/public/inspector/vector_tile_adapter/vector_tile_inspector_view.tsx

@@ -5,14 +5,10 @@
  * 2.0.
  */
 
-import React, { lazy } from 'react';
+import React from 'react';
 import type { Adapters, InspectorViewProps } from '@kbn/inspector-plugin/public';
 import { i18n } from '@kbn/i18n';
-import { LazyWrapper } from '../../lazy_wrapper';
-
-const getLazyComponent = () => {
-  return lazy(() => import('./components/vector_tile_inspector'));
-};
+import { dynamic } from '@kbn/shared-ux-utility';
 
 export const VectorTileInspectorView = {
   title: i18n.translate('xpack.maps.inspector.vectorTileViewTitle', {
@@ -26,6 +22,12 @@ export const VectorTileInspectorView = {
     return Boolean(adapters.vectorTiles?.hasLayers());
   },
   component: (props: InspectorViewProps) => {
-    return <LazyWrapper getLazyComponent={getLazyComponent} lazyComponentProps={props} />;
+    const Component = dynamic(async () => {
+      const { VectorTileInspector } = await import('./components/vector_tile_inspector');
+      return {
+        default: VectorTileInspector,
+      };
+    });
+    return <Component {...props} />;
   },
 };

x-pack/plugins/maps/public/lazy_wrapper.tsx

@@ -1,31 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React, { FC, Suspense } from 'react';
-import { EuiDelayRender, EuiErrorBoundary, EuiSkeletonText } from '@elastic/eui';
-
-const Fallback = () => (
-  <EuiDelayRender>
-    <EuiSkeletonText lines={3} />
-  </EuiDelayRender>
-);
-
-interface Props<T> {
-  getLazyComponent: () => FC<T>;
-  lazyComponentProps: JSX.IntrinsicAttributes & T;
-}
-
-export function LazyWrapper<T>({ getLazyComponent, lazyComponentProps }: Props<T>) {
-  const LazyComponent = getLazyComponent();
-  return (
-    <EuiErrorBoundary>
-      <Suspense fallback={<Fallback />}>
-        <LazyComponent {...lazyComponentProps} />
-      </Suspense>
-    </EuiErrorBoundary>
-  );
-}

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';
 
-function RegionMapEditor(props: VisEditorOptionsProps) {
+export function RegionMapEditor(props: VisEditorOptionsProps) {
   const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
 
@@ -32,7 +32,3 @@ 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;

x-pack/plugins/maps/public/legacy_visualizations/region_map/region_map_vis_type.tsx

@@ -5,23 +5,26 @@
  * 2.0.
  */
 
-import React, { lazy } from 'react';
+import React from 'react';
 import { i18n } from '@kbn/i18n';
 import type { VisEditorOptionsProps } from '@kbn/visualizations-plugin/public';
 import { VisTypeDefinition } from '@kbn/visualizations-plugin/public';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { toExpressionAst } from './to_ast';
 import { REGION_MAP_VIS_TYPE, RegionMapVisParams } from './types';
-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} />;
+  const Component = dynamic(async () => {
+    const { RegionMapEditor } = await import('./region_map_editor');
+    return {
+      default: RegionMapEditor,
+    };
+  });
+  return <Component {...props} />;
 };
 
 export const regionMapVisType = {

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';
 
-function TileMapEditor(props: VisEditorOptionsProps) {
+export function TileMapEditor(props: VisEditorOptionsProps) {
   const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
 
@@ -32,7 +32,3 @@ 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;

x-pack/plugins/maps/public/legacy_visualizations/tile_map/tile_map_vis_type.tsx

@@ -5,23 +5,26 @@
  * 2.0.
  */
 
-import React, { lazy } from 'react';
+import React from 'react';
 import { i18n } from '@kbn/i18n';
 import type { VisEditorOptionsProps } from '@kbn/visualizations-plugin/public';
 import { VisTypeDefinition } from '@kbn/visualizations-plugin/public';
+import { dynamic } from '@kbn/shared-ux-utility';
 import { toExpressionAst } from './to_ast';
 import { MapTypes, TileMapVisParams, TILE_MAP_VIS_TYPE } from './types';
-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} />;
+  const Component = dynamic(async () => {
+    const { TileMapEditor } = await import('./tile_map_editor');
+    return {
+      default: TileMapEditor,
+    };
+  });
+  return <Component {...props} />;
 };
 
 export const tileMapVisType = {