Spike: Lazy load Monaco (DH-20141)

packages/code-studio/src/main/AppMainContainer.tsx

@@ -46,7 +46,7 @@ import {
   emitCycleToPreviousTab,
 } from '@deephaven/dashboard';
 import {
-  ConsolePlugin,
+  // ConsolePlugin,
   InputFilterEvent,
   MarkdownEvent,
   NotebookEvent,
@@ -93,7 +93,7 @@ import {
   createExportLogsContextAction,
 } from '@deephaven/app-utils';
 import JSZip from 'jszip';
-import SettingsMenu from '../settings/SettingsMenu';
+import { LazySettingsMenu } from '../settings/LazySettingsMenu';
 import AppControlsMenu from './AppControlsMenu';
 import { getLayoutStorage, getServerConfigValues } from '../redux';
 import './AppMainContainer.scss';
@@ -1053,21 +1053,21 @@ export class AppMainContainer extends Component<
             )
           }
           plugins={[
-            <ConsolePlugin
-              key="ConsolePlugin"
-              hydrateConsole={AppMainContainer.hydrateConsole}
-              notebooksUrl={
-                new URL(
-                  `${import.meta.env.VITE_ROUTE_NOTEBOOKS}`,
-                  document.baseURI
-                ).href
-              }
-            />,
+            // <ConsolePlugin
+            //   key="ConsolePlugin"
+            //   hydrateConsole={AppMainContainer.hydrateConsole}
+            //   notebooksUrl={
+            //     new URL(
+            //       `${import.meta.env.VITE_ROUTE_NOTEBOOKS}`,
+            //       document.baseURI
+            //     ).href
+            //   }
+            // />,
             ...dashboardPlugins,
           ]}
         />
         <SlideTransition in={isSettingsMenuShown} mountOnEnter unmountOnExit>
-          <SettingsMenu
+          <LazySettingsMenu
             serverConfigValues={serverConfigValues}
             pluginData={plugins}
             onDone={this.handleSettingsMenuHide}

packages/code-studio/src/settings/EditorSectionContent.tsx

@@ -14,7 +14,7 @@ import { getNotebookSettings, updateNotebookSettings } from '@deephaven/redux';
 import { vsSettings } from '@deephaven/icons';
 import {
   MonacoProviders,
-  RuffSettingsModal,
+  LazyRuffSettingsModal,
   RUFF_DEFAULT_SETTINGS,
 } from '@deephaven/console';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -139,7 +139,7 @@ export function EditorSectionContent(): JSX.Element {
         </ActionButton>
       </div>
       {isRuffSettingsOpen && (
-        <RuffSettingsModal
+        <LazyRuffSettingsModal
           text={val}
           isOpen={isRuffSettingsOpen}
           onClose={handleRuffSettingsClose}

packages/code-studio/src/settings/LazySettingsMenu.tsx

@@ -0,0 +1,18 @@
+import React, { lazy, Suspense } from 'react';
+import { LoadingOverlay } from '@deephaven/components';
+import type { SettingsMenuProps } from './SettingsMenu';
+
+const SettingsMenu = lazy(() => import('./SettingsMenu'));
+
+export function LazySettingsMenu(props: SettingsMenuProps): JSX.Element {
+  return (
+    <Suspense
+      fallback={<LoadingOverlay data-testid="lazy-settings-menu-loading" />}
+    >
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <SettingsMenu {...props} />
+    </Suspense>
+  );
+}
+
+export default LazySettingsMenu;

packages/code-studio/src/settings/SettingsMenu.tsx

@@ -47,7 +47,7 @@ import AdvancedSectionContent from './AdvancedSectionContent';
 import ThemeSectionContent from './ThemeSectionContent';
 import EditorSectionContent from './EditorSectionContent';
 
-interface SettingsMenuProps {
+export interface SettingsMenuProps {
   serverConfigValues: ServerConfigValues;
   pluginData: PluginModuleMap;
   user: User;

packages/console/src/ConsoleInput.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent, type ReactElement, type RefObject } from 'react';
 import classNames from 'classnames';
-import * as monaco from 'monaco-editor';
+import type * as Monaco from 'monaco-editor';
 import Log from '@deephaven/log';
 import {
   assertNotNull,
@@ -38,7 +38,7 @@ interface ConsoleInputProps {
 interface ConsoleInputState {
   commandEditorHeight: number;
   isFocused: boolean;
-  model: monaco.editor.ITextModel | null;
+  model: Monaco.editor.ITextModel | null;
 }
 
 /**
@@ -103,7 +103,7 @@ export class ConsoleInput extends PureComponent<
 
   commandContainer: RefObject<HTMLDivElement>;
 
-  commandEditor?: monaco.editor.IStandaloneCodeEditor;
+  commandEditor?: Monaco.editor.IStandaloneCodeEditor;
 
   commandHistoryIndex: number | null;
 
@@ -156,12 +156,13 @@ export class ConsoleInput extends PureComponent<
     }
   }
 
-  initCommandEditor(): void {
+  async initCommandEditor(): Promise<void> {
     const { language, session } = this.props;
+    const monaco = await MonacoUtils.lazyMonaco();
     const model = monaco.editor.createModel(
       '',
       language,
-      MonacoUtils.generateConsoleUri()
+      await MonacoUtils.generateConsoleUri()
     );
     const commandSettings = {
       copyWithSyntaxHighlighting: false,

packages/console/src/common/Code.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, type ReactNode } from 'react';
-import * as monaco from 'monaco-editor';
 import { useTheme } from '@deephaven/components';
 
 interface CodeProps {
@@ -15,6 +14,7 @@ function Code({ children, language }: CodeProps): JSX.Element {
     let isCanceled = false;
     async function colorize() {
       if (children != null && activeThemes != null) {
+        const monaco = await import('monaco-editor');
         const result = await monaco.editor.colorize(
           children.toString(),
           language,