rename app provider to editor provider and add it to the editor instead

1 files changed, 42 insertions, 0 deletions

diff --git a/apps/web/src/components/editor-provider.tsx b/apps/web/src/components/editor-provider.tsx
new file mode 100644
index 00000000..fbae4c90
--- /dev/null
+++ b/apps/web/src/components/editor-provider.tsx
@@ -0,0 +1,42 @@
+"use client";

+

+import { useEffect } from "react";

+import { Loader2 } from "lucide-react";

+import { useAppStore } from "@/stores/editor-store";

+import { usePanelStore } from "@/stores/panel-store";

+

+interface EditorProviderProps {

+  children: React.ReactNode;

+}

+

+export function EditorProvider({ children }: EditorProviderProps) {

+  const { isInitializing, isPanelsReady, initializeApp } = useAppStore();

+  const { setInitialized } = usePanelStore();

+

+  useEffect(() => {

+    const initialize = async () => {

+      // Initialize the app

+      await initializeApp();

+

+      // Initialize panel store for future resize events

+      setInitialized();

+    };

+

+    initialize();

+  }, [initializeApp, setInitialized]);

+

+  // 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}</>;

+}