perf(editor): split the bundle so the shell loads first

Author: dnlblasco

resources/js/app.tsx

@@ -1,4 +1,4 @@
-import { StrictMode } from 'react';
+import { StrictMode, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { DemoWorkspace } from './components/DemoWorkspace';
 import { ToastProvider } from './components/Toasts';
@@ -12,13 +12,37 @@ if (!rootElement) {
     throw new Error('React root element was not found.');
 }
 
-const realtimeReady = startRealtime(readRealtimeSettings(rootElement));
+const settings = readRealtimeSettings(rootElement);
 const sessionId = rootElement.dataset.sessionId;
 
+/**
+ * Brings the editor up straight away and connects live updates behind it, so
+ * loading Echo never delays the first paint.
+ */
+function Editor({ sessionId }: { sessionId: string }) {
+    const [realtimeReady, setRealtimeReady] = useState(false);
+
+    useEffect(() => {
+        let cancelled = false;
+
+        void startRealtime(settings).then(ready => {
+            if (!cancelled) {
+                setRealtimeReady(ready);
+            }
+        });
+
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
+    return <EditorApp sessionId={sessionId} realtimeReady={realtimeReady} />;
+}
+
 createRoot(rootElement).render(
     <StrictMode>
         {sessionId ? (
-            <EditorApp sessionId={sessionId} realtimeReady={realtimeReady} />
+            <Editor sessionId={sessionId} />
         ) : (
             <ToastProvider>
                 <EditorStoreProvider>

resources/js/components/EditorWorkspace.tsx

@@ -1,12 +1,15 @@
-import { useCallback, useEffect, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useState } from 'react';
 import { ApiError } from '../api/client';
 import { deleteMenu, fetchMenu, fetchMenus, menuKey, saveMenu, SETTINGS_DESCRIPTOR } from '../editor/menus';
 import { EDITOR_VERSION } from '../editor/config';
 import { activeTab, hasUnsavedWork, useEditorStore } from '../editor/store';
 import { validateMenuSource, type MenuDiagnostics } from '../editor/validator';
 import { AdminTerminal } from './AdminTerminal';
 import { MaintenanceBanner } from './MaintenanceBanner';
-import { RealtimeBridge } from './RealtimeBridge';
+
+// Echo and Pusher ride along with this component, so it is fetched only once
+// a session actually has live updates available.
+const RealtimeBridge = lazy(() => import('./RealtimeBridge').then(m => ({ default: m.RealtimeBridge })));
 import { WorkspaceLayout } from './WorkspaceLayout';
 import { useToast } from './Toasts';
 import type { MenuDescriptor, SessionState } from '../types/editor';
@@ -144,17 +147,19 @@ export function EditorWorkspace({ sessionId, session, realtimeReady }: EditorWor
     return (
         <>
             {realtimeReady && (
-                <RealtimeBridge
-                    sessionId={sessionId}
-                    onPluginStatus={online => {
-                        dispatch({ type: 'plugin/status', online });
-
-                        if (online) {
-                            void loadMenus();
-                        }
-                    }}
-                    onMenuChanged={() => void loadMenus()}
-                />
+                <Suspense fallback={null}>
+                    <RealtimeBridge
+                        sessionId={sessionId}
+                        onPluginStatus={online => {
+                            dispatch({ type: 'plugin/status', online });
+
+                            if (online) {
+                                void loadMenus();
+                            }
+                        }}
+                        onMenuChanged={() => void loadMenus()}
+                    />
+                </Suspense>
             )}
 
             <WorkspaceLayout

resources/js/components/WorkspaceLayout.tsx

@@ -1,13 +1,16 @@
-import type { ReactNode } from 'react';
+import { lazy, Suspense, type ReactNode } from 'react';
 import { activeTab, isDirty, useEditorStore } from '../editor/store';
 import { EditorTabs } from './EditorTabs';
 import { MenuSidebar } from './MenuSidebar';
 import { OutputPanel } from './OutputPanel';
 import { StatusBar } from './StatusBar';
-import { VisualEditor } from './visual/VisualEditor';
-import { FormBuilder } from './visual/FormBuilder';
-import { ConfigEditor } from './visual/ConfigEditor';
-import { YamlEditor } from './YamlEditor';
+
+// Each of these pulls a heavy dependency (CodeMirror, the canvas, the form
+// builder), and only one of them is on screen at a time.
+const YamlEditor = lazy(() => import('./YamlEditor').then(m => ({ default: m.YamlEditor })));
+const VisualEditor = lazy(() => import('./visual/VisualEditor').then(m => ({ default: m.VisualEditor })));
+const FormBuilder = lazy(() => import('./visual/FormBuilder').then(m => ({ default: m.FormBuilder })));
+const ConfigEditor = lazy(() => import('./visual/ConfigEditor').then(m => ({ default: m.ConfigEditor })));
 import type { MenuDiagnostics } from '../editor/validator';
 import type { MenuDescriptor } from '../types/editor';
 
@@ -137,6 +140,7 @@ export function WorkspaceLayout({
 
                         <div className="editor-content">
                             <div className="editor-body">
+                                <Suspense fallback={<div className="item-editor-content">Loading the editor...</div>}>
                                 {current === null ? (
                                     <div className="welcome-screen">
                                         <div className="welcome-icon">📝</div>
@@ -168,6 +172,7 @@ export function WorkspaceLayout({
                                         onChange={content => dispatch({ type: 'tab/edited', key: current.key, content })}
                                     />
                                 )}
+                                </Suspense>
                             </div>
 
                             <OutputPanel diagnostics={diagnostics} onClose={onCloseDiagnostics} />

resources/js/components/visual/ItemPalette.tsx

@@ -1,5 +1,6 @@
 import { useDeferredValue, useMemo, useState } from 'react';
-import { formatMaterialName, getAvailableMaterials } from '../../editor/materials';
+import { formatMaterialName } from '../../editor/materials';
+import { getAvailableMaterials } from '../../editor/materialCatalogue';
 import { ItemIcon } from './ItemIcon';
 
 interface ItemPaletteProps {

resources/js/components/visual/MaterialSelector.tsx

@@ -1,5 +1,6 @@
 import { useDeferredValue, useMemo, useState } from 'react';
-import { formatMaterialName, getAvailableMaterials } from '../../editor/materials';
+import { formatMaterialName } from '../../editor/materials';
+import { getAvailableMaterials } from '../../editor/materialCatalogue';
 import { Modal } from '../Modal';
 import { ItemIcon } from './ItemIcon';