apps/web/src/components/editor-provider.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

"use client";

import { useEffect } from "react";
import { Loader2 } from "lucide-react";
import { useEditorStore } from "@/stores/editor-store";
import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";

interface EditorProviderProps {
	children: React.ReactNode;
}

export function EditorProvider({ children }: EditorProviderProps) {
	const { isInitializing, isPanelsReady, initializeApp } = useEditorStore();

	useKeyboardShortcuts({
		enabled: !isInitializing && isPanelsReady,
		context: "editor",
	});

	useEffect(() => {
		initializeApp();
	}, [initializeApp]);

	// Show loading screen while initializing
	if (isInitializing || !isPanelsReady) {
		return (
			<div className="h-screen w-screen flex items-center justify-center bg-background">
				<div className="flex flex-col items-center gap-4">
					<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
					<p className="text-sm text-muted-foreground">Loading editor...</p>
				</div>
			</div>
		);
	}

	// App is ready, render children
	return <>{children}</>;
}