app: lazy-load terminal

This changes the terminal sagas and components to be lazy loaded to
improve time until first render.

src/app/App.tsx

@@ -13,7 +13,6 @@ import { InstallPybricksDialog } from '../firmware/installPybricksDialog/Install
 import RestoreOfficialDialog from '../firmware/restoreOfficialDialog/RestoreOfficialDialog';
 import { useSettingIsShowDocsEnabled } from '../settings/hooks';
 import StatusBar from '../status-bar/StatusBar';
-import Terminal from '../terminal/Terminal';
 import Toolbar from '../toolbar/Toolbar';
 import Tour from '../tour/Tour';
 import { isMacOS } from '../utils/os';
@@ -32,6 +31,19 @@ const Editor = React.lazy(async () => {
     return componentModule;
 });
 
+const Terminal = React.lazy(async () => {
+    const [sagaModule, componentModule] = await Promise.all([
+        import('../terminal/sagas'),
+        import('../terminal/Terminal'),
+    ]);
+
+    window.dispatchEvent(
+        new CustomEvent('pb-lazy-saga', { detail: { saga: sagaModule.default } }),
+    );
+
+    return componentModule;
+});
+
 const Docs: React.VFC = () => {
     const { setIsSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
 
@@ -205,7 +217,11 @@ const App: React.VFC = () => {
                                 </React.Suspense>
                             </div>
                             <div className="pb-app-terminal">
-                                <Terminal />
+                                <React.Suspense
+                                    fallback={<Spinner className="h-100" />}
+                                >
+                                    <Terminal />
+                                </React.Suspense>
                             </div>
                         </SplitterLayout>
                         <div className="pb-app-docs">

src/editor/Editor.tsx

@@ -27,7 +27,6 @@ import MonacoEditor, {
 } from 'react-monaco-editor';
 import { useDispatch } from 'react-redux';
 import { useTernaryDarkMode } from 'usehooks-ts';
-import { IDisposable } from 'xterm';
 import { UUID } from '../fileStorage';
 import { useFileStoragePath } from '../fileStorage/hooks';
 import { compile } from '../mpy/actions';
@@ -42,7 +41,7 @@ import { UntitledHintContribution } from './untitledHint';
 
 monaco.languages.register({ id: pybricksMicroPythonId });
 
-const toDispose = new Array<IDisposable>();
+const toDispose = new Array<monaco.IDisposable>();
 toDispose.push(
     monaco.languages.setLanguageConfiguration(
         pybricksMicroPythonId,

src/sagas.ts

@@ -16,7 +16,7 @@ import lwp3BootloaderProtocol from './lwp3-bootloader/sagas';
 import lwp3BootloaderBle from './lwp3-bootloader/sagas-ble';
 import mpy from './mpy/sagas';
 import notifications from './notifications/sagas';
-import terminal, { TerminalSagaContext } from './terminal/sagas';
+import type { TerminalSagaContext } from './terminal/sagas';
 
 /**
  * Listens to the 'pb-lazy-saga' event to spawn sagas from a React.lazy() initializer.
@@ -53,7 +53,6 @@ export default function* (): Generator {
         hub(),
         mpy(),
         notifications(),
-        terminal(),
         lazySagas(),
     ]);
 }