Add loader while publishing

src/App.tsx

@@ -7,6 +7,7 @@ import {
 import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
 import { createConfig } from "@/editor/config";
 import { ShopifyProvider } from "@/editor/contexts/shopify-context";
+import { Loader } from "@/components/ui/loader";
 import schemaJson from "../app.schema.json";
 
 type Pages = Record<string, { root: any; content: any[] }>;
@@ -27,6 +28,7 @@ function readPathname() {
 export default function App() {
   const pages = schemaJson as Pages;
   const [currentPath, setCurrentPath] = useState<string>(readPathname);
+  const [isPublishing, setIsPublishing] = useState(false);
 
   useEffect(() => {
     const onPop = () => setCurrentPath(readPathname());
@@ -49,16 +51,18 @@ export default function App() {
   );
 
   const handlePublish = useCallback((data: any, route?: string) => {
+    setIsPublishing(true);
     if (typeof window !== "undefined" && window.parent !== window) {
       window.parent.postMessage(
         { type: "PUBLISH", data: { data, route } },
         "*",
       );
     }
+    setTimeout(() => setIsPublishing(false), 1000);
   }, []);
 
   return (
-    <div style={{ height: "100vh", width: "100vw" }}>
+    <div className="h-screen w-screen">
       <ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
         <ReactEditorApp
           config={config as any}
@@ -69,6 +73,11 @@ export default function App() {
           onPublish={handlePublish}
         />
       </ShopifyProvider>
+      {isPublishing && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/30">
+          <Loader size={32} />
+        </div>
+      )}
     </div>
   );
 }