Lazy load the editor bundle

src/App.tsx

@@ -1,14 +1,19 @@
-import { useEffect, useState } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 import { CountdownOverlay } from "./components/launch/CountdownOverlay.tsx";
 import { LaunchWindow } from "./components/launch/LaunchWindow";
 import { SourceSelector } from "./components/launch/SourceSelector";
 import { Toaster } from "./components/ui/sonner";
 import { TooltipProvider } from "./components/ui/tooltip";
-import { ShortcutsConfigDialog } from "./components/video-editor/ShortcutsConfigDialog";
-import VideoEditor from "./components/video-editor/VideoEditor";
 import { ShortcutsProvider } from "./contexts/ShortcutsContext";
 import { loadAllCustomFonts } from "./lib/customFonts";
 
+const VideoEditor = lazy(() => import("./components/video-editor/VideoEditor"));
+const ShortcutsConfigDialog = lazy(() =>
+	import("./components/video-editor/ShortcutsConfigDialog").then((module) => ({
+		default: module.ShortcutsConfigDialog,
+	})),
+);
+
 export default function App() {
 	const [windowType, setWindowType] = useState(
 		() => new URLSearchParams(window.location.search).get("windowType") || "",
@@ -59,8 +64,10 @@ export default function App() {
 			case "editor":
 				return (
 					<ShortcutsProvider>
-						<VideoEditor />
-						<ShortcutsConfigDialog />
+						<Suspense fallback={<div className="h-screen bg-background" />}>
+							<VideoEditor />
+							<ShortcutsConfigDialog />
+						</Suspense>
 					</ShortcutsProvider>
 				);
 			default:

src/hooks/useScreenRecorder.ts

@@ -408,6 +408,14 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		}
 	});
 
+	const safeHideCountdownOverlay = useCallback(async (runId: number) => {
+		try {
+			await window.electronAPI.hideCountdownOverlay(runId);
+		} catch (error) {
+			console.warn("Failed to hide countdown overlay:", error);
+		}
+	}, []);
+
 	useEffect(() => {
 		let cleanup: (() => void) | undefined;
 
@@ -450,7 +458,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			webcamRecorder.current = null;
 			teardownMedia();
 		};
-	}, [teardownMedia]);
+	}, [teardownMedia, safeHideCountdownOverlay]);
 
 	const safeShowCountdownOverlay = async (value: number, runId: number) => {
 		try {
@@ -477,14 +485,6 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		}
 	};
 
-	const safeHideCountdownOverlay = async (runId: number) => {
-		try {
-			await window.electronAPI.hideCountdownOverlay(runId);
-		} catch (error) {
-			console.warn("Failed to hide countdown overlay:", error);
-		}
-	};
-
 	const isCountdownRunActive = (runId?: number) =>
 		runId === undefined || countdownRunId.current === runId;