[Visualize] Lazy load default editor, fix duplicated styles (#66732)

* Lazy load bundle, fix duplicated styles

* Add EuiLoadingChart and EuiErrorBoundary

* Return localStorage service

* Use mono spinner

* Get rid of loading the editor outside of visualize mounting

src/plugins/vis_default_editor/public/default_editor.tsx

@@ -17,16 +17,23 @@
  * under the License.
  */
 
+import './index.scss';
+
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 
 import { EditorRenderProps } from 'src/plugins/visualize/public';
-import { PanelsContainer, Panel } from '../../kibana_react/public';
+import { KibanaContextProvider, PanelsContainer, Panel } from '../../kibana_react/public';
+import { Storage } from '../../kibana_utils/public';
 
 import { DefaultEditorSideBar } from './components/sidebar';
 import { DefaultEditorControllerState } from './default_editor_controller';
 import { getInitialWidth } from './editor_size';
 
+const localStorage = new Storage(window.localStorage);
+
 function DefaultEditor({
+  core,
+  data,
   vis,
   uiState,
   timeRange,
@@ -37,7 +44,7 @@ function DefaultEditor({
   eventEmitter,
   linked,
   savedSearch,
-}: DefaultEditorControllerState & Omit<EditorRenderProps, 'data' | 'core'>) {
+}: DefaultEditorControllerState & EditorRenderProps) {
   const visRef = useRef<HTMLDivElement>(null);
   const [isCollapsed, setIsCollapsed] = useState(false);
 
@@ -69,34 +76,49 @@ function DefaultEditor({
   const editorInitialWidth = getInitialWidth(vis.type.editorConfig.defaultSize);
 
   return (
-    <PanelsContainer
-      className="visEditor--default"
-      resizerClassName={`visEditor__resizer ${isCollapsed ? 'visEditor__resizer-isHidden' : ''}`}
-    >
-      <Panel className="visEditor__visualization" initialWidth={100 - editorInitialWidth}>
-        <div className="visEditor__canvas" ref={visRef} data-shared-items-container />
-      </Panel>
-
-      <Panel
-        className={`visEditor__collapsibleSidebar ${
-          isCollapsed ? 'visEditor__collapsibleSidebar-isClosed' : ''
-        }`}
-        initialWidth={editorInitialWidth}
+    <core.i18n.Context>
+      <KibanaContextProvider
+        services={{
+          appName: 'vis_default_editor',
+          storage: localStorage,
+          data,
+          ...core,
+        }}
       >
-        <DefaultEditorSideBar
-          isCollapsed={isCollapsed}
-          onClickCollapse={onClickCollapse}
-          optionTabs={optionTabs}
-          vis={vis}
-          uiState={uiState}
-          isLinkedSearch={linked}
-          savedSearch={savedSearch}
-          timeRange={timeRange}
-          eventEmitter={eventEmitter}
-        />
-      </Panel>
-    </PanelsContainer>
+        <PanelsContainer
+          className="visEditor--default"
+          resizerClassName={`visEditor__resizer ${
+            isCollapsed ? 'visEditor__resizer-isHidden' : ''
+          }`}
+        >
+          <Panel className="visEditor__visualization" initialWidth={100 - editorInitialWidth}>
+            <div className="visEditor__canvas" ref={visRef} data-shared-items-container />
+          </Panel>
+
+          <Panel
+            className={`visEditor__collapsibleSidebar ${
+              isCollapsed ? 'visEditor__collapsibleSidebar-isClosed' : ''
+            }`}
+            initialWidth={editorInitialWidth}
+          >
+            <DefaultEditorSideBar
+              isCollapsed={isCollapsed}
+              onClickCollapse={onClickCollapse}
+              optionTabs={optionTabs}
+              vis={vis}
+              uiState={uiState}
+              isLinkedSearch={linked}
+              savedSearch={savedSearch}
+              timeRange={timeRange}
+              eventEmitter={eventEmitter}
+            />
+          </Panel>
+        </PanelsContainer>
+      </KibanaContextProvider>
+    </core.i18n.Context>
   );
 }
 
-export { DefaultEditor };
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { DefaultEditor as default };

src/plugins/vis_default_editor/public/default_editor_controller.tsx

@@ -17,19 +17,17 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { i18n } from '@kbn/i18n';
 import { EventEmitter } from 'events';
+import { EuiErrorBoundary, EuiLoadingChart } from '@elastic/eui';
 
 import { EditorRenderProps } from 'src/plugins/visualize/public';
 import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public';
-import { Storage } from '../../kibana_utils/public';
-import { KibanaContextProvider } from '../../kibana_react/public';
-import { DefaultEditor } from './default_editor';
 import { DefaultEditorDataTab, OptionTab } from './components/sidebar';
 
-const localStorage = new Storage(window.localStorage);
+const DefaultEditor = lazy(() => import('./default_editor'));
 
 export interface DefaultEditorControllerState {
   vis: Vis;
@@ -80,20 +78,26 @@ class DefaultEditorController {
     };
   }
 
-  render({ data, core, ...props }: EditorRenderProps) {
+  render(props: EditorRenderProps) {
     render(
-      <core.i18n.Context>
-        <KibanaContextProvider
-          services={{
-            appName: 'vis_default_editor',
-            storage: localStorage,
-            data,
-            ...core,
-          }}
+      <EuiErrorBoundary>
+        <Suspense
+          fallback={
+            <div
+              style={{
+                display: 'flex',
+                flex: '1 1 auto',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <EuiLoadingChart size="xl" mono />
+            </div>
+          }
         >
           <DefaultEditor {...this.state} {...props} />
-        </KibanaContextProvider>
-      </core.i18n.Context>,
+        </Suspense>
+      </EuiErrorBoundary>,
       this.el
     );
   }

src/plugins/vis_default_editor/public/index.scss

@@ -1,5 +1,3 @@
-@import 'src/legacy/ui/public/styles/styling_constants';
-
 $vis-editor-sidebar-min-width: 350px;
 
 // Main layout

src/plugins/vis_default_editor/public/index.ts

@@ -17,8 +17,6 @@
  * under the License.
  */
 
-import './index.scss';
-
 export { DefaultEditorController } from './default_editor_controller';
 export { useValidation } from './components/controls/utils';
 export { RangesParamEditor, RangeValues } from './components/controls/ranges';

src/plugins/visualize/public/application/editor/visualization_editor.js

@@ -17,6 +17,8 @@
  * under the License.
  */
 
+import { DefaultEditorController } from '../../../../vis_default_editor/public';
+
 export function initVisEditorDirective(app, deps) {
   app.directive('visualizationEditor', function($timeout) {
     return {
@@ -32,7 +34,7 @@ export function initVisEditorDirective(app, deps) {
         eventEmitter: '=',
       },
       link: function($scope, element) {
-        const Editor = $scope.vis.type.editor || deps.DefaultVisualizationEditor;
+        const Editor = $scope.vis.type.editor || DefaultEditorController;
         const editor = new Editor(
           element[0],
           $scope.vis,

src/plugins/visualize/public/kibana_services.ts

@@ -34,7 +34,6 @@ import { DataPublicPluginStart } from '../../data/public';
 import { VisualizationsStart } from '../../visualizations/public';
 import { SavedVisualizations } from './application/types';
 import { KibanaLegacyStart } from '../../kibana_legacy/public';
-import { DefaultEditorController } from '../../vis_default_editor/public';
 import { DashboardStart } from '../../dashboard/public';
 import { SavedObjectsStart } from '../../saved_objects/public';
 
@@ -56,7 +55,6 @@ export interface VisualizeKibanaServices {
   dashboard: DashboardStart;
   I18nContext: I18nStart['Context'];
   setActiveUrl: (newUrl: string) => void;
-  DefaultVisualizationEditor: typeof DefaultEditorController;
   createVisEmbeddableFromObject: VisualizationsStart['__LEGACY']['createVisEmbeddableFromObject'];
   scopedHistory: () => ScopedHistory;
   savedObjects: SavedObjectsStart;

src/plugins/visualize/public/plugin.ts

@@ -40,7 +40,6 @@ import { VisualizationsStart } from '../../visualizations/public';
 import { VisualizeConstants } from './application/visualize_constants';
 import { setServices, VisualizeKibanaServices } from './kibana_services';
 import { FeatureCatalogueCategory, HomePublicPluginSetup } from '../../home/public';
-import { DefaultEditorController } from '../../vis_default_editor/public';
 import { DashboardStart } from '../../dashboard/public';
 import { DEFAULT_APP_CATEGORIES } from '../../../core/public';
 import { SavedObjectsStart } from '../../saved_objects/public';
@@ -132,7 +131,6 @@ export class VisualizePlugin
           visualizations: pluginsStart.visualizations,
           I18nContext: coreStart.i18n.Context,
           setActiveUrl,
-          DefaultVisualizationEditor: DefaultEditorController,
           createVisEmbeddableFromObject:
             pluginsStart.visualizations.__LEGACY.createVisEmbeddableFromObject,
           dashboard: pluginsStart.dashboard,