Add loader while publishing

components/ui/loader.tsx

@@ -0,0 +1,96 @@
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "react";
+
+interface LoaderIconProps {
+  size?: number;
+}
+
+const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
+  <svg
+    height={size}
+    strokeLinejoin="round"
+    style={{ color: "currentcolor" }}
+    viewBox="0 0 16 16"
+    width={size}
+  >
+    <title>Loader</title>
+    <g clipPath="url(#clip0_2393_1490)">
+      <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M8 16V12"
+        opacity="0.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 1.52783L5.64887 4.7639"
+        opacity="0.9"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 1.52783L10.3511 4.7639"
+        opacity="0.1"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 14.472L10.3511 11.236"
+        opacity="0.4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 14.472L5.64887 11.236"
+        opacity="0.6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 5.52783L11.8043 6.7639"
+        opacity="0.2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 10.472L4.19583 9.23598"
+        opacity="0.7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 10.4722L11.8043 9.2361"
+        opacity="0.3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 5.52783L4.19583 6.7639"
+        opacity="0.8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2393_1490">
+        <rect fill="white" height="16" width="16" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+  size?: number;
+};
+
+export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
+  <div
+    className={cn(
+      "inline-flex animate-spin items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    <LoaderIcon size={size} />
+  </div>
+);

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>
   );
 }