@liiift-studio/deploy-vercel-from-sanity 1.0.2 → 1.0.4

package/dist/index.js

@@ -35,7 +35,6 @@ var import_icons5 = require("@sanity/icons");
 
 // src/components/DeployItem.tsx
 var import_react2 = require("react");
-var import_react_dom = require("react-dom");
 var import_ui3 = require("@sanity/ui");
 var import_icons2 = require("@sanity/icons");
 
@@ -289,6 +288,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   const [deployments, setDeployments] = (0, import_react2.useState)([]);
   const [loadingInitial, setLoadingInitial] = (0, import_react2.useState)(true);
   const [triggering, setTriggering] = (0, import_react2.useState)(false);
+  const [clicked, setClicked] = (0, import_react2.useState)(false);
   const [canceling, setCanceling] = (0, import_react2.useState)(false);
   const [deployError, setDeployError] = (0, import_react2.useState)(null);
   const [showHistory, setShowHistory] = (0, import_react2.useState)(false);
@@ -321,6 +321,9 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   (0, import_react2.useEffect)(() => {
     if (triggering && latest && latest.state !== void 0) setTriggering(false);
   }, [triggering, latest]);
+  (0, import_react2.useEffect)(() => {
+    if (triggering) setClicked(false);
+  }, [triggering]);
   const prevStateRef = (0, import_react2.useRef)(void 0);
   (0, import_react2.useEffect)(() => {
     const current = latest?.state;
@@ -357,16 +360,20 @@ function DeployItem({ target, token, onDelete, onEdit }) {
       if (timerRef.current) clearInterval(timerRef.current);
     };
   }, [isActive, latest?.created]);
-  const deploy = (0, import_react2.useCallback)(async () => {
+  const deploy = (0, import_react2.useCallback)(() => {
     setDeployError(null);
-    (0, import_react_dom.flushSync)(() => setTriggering(true));
-    try {
-      await triggerDeploy(target.url);
-      setTimeout(fetchDeployments, 2e3);
-    } catch (err) {
-      setTriggering(false);
-      setDeployError(err instanceof Error ? err.message : "Deploy failed");
-    }
+    setClicked(true);
+    setTriggering(true);
+    void (async () => {
+      try {
+        await triggerDeploy(target.url);
+        setTimeout(fetchDeployments, 2e3);
+      } catch (err) {
+        setTriggering(false);
+        setClicked(false);
+        setDeployError(err instanceof Error ? err.message : "Deploy failed");
+      }
+    })();
   }, [target.url, fetchDeployments]);
   const cancel = (0, import_react2.useCallback)(async () => {
     if (!latest?.uid) return;
@@ -433,7 +440,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", style: { marginLeft: "-0.1em", opacity: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm0 2.122a2.25 2.25 0 1 0-1.5 0v.878A2.25 2.25 0 0 0 5.75 8.5h1.5v2.128a2.251 2.251 0 1 0 1.5 0V8.5h1.5a2.25 2.25 0 0 0 2.25-2.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75h-4.5A.75.75 0 0 1 5 6.25v-.878zm3.75 7.378a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm3-8.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z" }) })
               ] }) }),
               token && !loadingInitial && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                triggering ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Badge, { tone: "caution", padding: 2, children: "Triggering\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusBadge, { state: latest?.state, showSpinner: true }),
+                triggering ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Badge, { tone: "caution", padding: 2, children: "Triggering\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusBadge, { state: latest?.state }),
                 isActiveState(latest?.state) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   import_ui3.Button,
                   {
@@ -446,7 +453,10 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                     style: { cursor: "pointer" }
                   }
                 ),
-                isActive && elapsed > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: formatDuration(elapsed) }) : !isActive && deployedAt ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: deployedAt }) : null
+                isActive && elapsed > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 1, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Spinner, { muted: true, style: { marginLeft: 4 } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: formatDuration(elapsed) })
+                ] }) : !isActive && deployedAt ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: deployedAt }) : null
               ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -545,8 +555,9 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                 creator
               ] }),
               latest?.state === "READY" && latest.ready && latest.created && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Text, { size: 1, muted: true, children: [
-                "\xB7 ",
-                formatDuration(Math.floor((latest.ready - latest.created) / 1e3))
+                "Took ",
+                formatDuration(Math.floor((latest.ready - latest.created) / 1e3)),
+                " to build"
               ] }),
               latest?.url && latest.state === "READY" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 import_ui3.Tooltip,
@@ -689,7 +700,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
               text: "Deploy",
               tone: "primary",
               loading: triggering,
-              disabled: isActive,
+              disabled: isActive || clicked,
               onClick: deploy,
               style: {
                 flex: 1,

package/dist/index.mjs

@@ -21,7 +21,6 @@ import { TokenIcon, TrashIcon as TrashIcon2, WarningOutlineIcon as WarningOutlin
 
 // src/components/DeployItem.tsx
 import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2, useRef } from "react";
-import { flushSync } from "react-dom";
 import {
   Card as Card2,
   Box as Box2,
@@ -311,6 +310,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   const [deployments, setDeployments] = useState2([]);
   const [loadingInitial, setLoadingInitial] = useState2(true);
   const [triggering, setTriggering] = useState2(false);
+  const [clicked, setClicked] = useState2(false);
   const [canceling, setCanceling] = useState2(false);
   const [deployError, setDeployError] = useState2(null);
   const [showHistory, setShowHistory] = useState2(false);
@@ -343,6 +343,9 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   useEffect2(() => {
     if (triggering && latest && latest.state !== void 0) setTriggering(false);
   }, [triggering, latest]);
+  useEffect2(() => {
+    if (triggering) setClicked(false);
+  }, [triggering]);
   const prevStateRef = useRef(void 0);
   useEffect2(() => {
     const current = latest?.state;
@@ -379,16 +382,20 @@ function DeployItem({ target, token, onDelete, onEdit }) {
       if (timerRef.current) clearInterval(timerRef.current);
     };
   }, [isActive, latest?.created]);
-  const deploy = useCallback2(async () => {
+  const deploy = useCallback2(() => {
     setDeployError(null);
-    flushSync(() => setTriggering(true));
-    try {
-      await triggerDeploy(target.url);
-      setTimeout(fetchDeployments, 2e3);
-    } catch (err) {
-      setTriggering(false);
-      setDeployError(err instanceof Error ? err.message : "Deploy failed");
-    }
+    setClicked(true);
+    setTriggering(true);
+    void (async () => {
+      try {
+        await triggerDeploy(target.url);
+        setTimeout(fetchDeployments, 2e3);
+      } catch (err) {
+        setTriggering(false);
+        setClicked(false);
+        setDeployError(err instanceof Error ? err.message : "Deploy failed");
+      }
+    })();
   }, [target.url, fetchDeployments]);
   const cancel = useCallback2(async () => {
     if (!latest?.uid) return;
@@ -455,7 +462,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                 /* @__PURE__ */ jsx3("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", style: { marginLeft: "-0.1em", opacity: 0.5 }, children: /* @__PURE__ */ jsx3("path", { d: "M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm0 2.122a2.25 2.25 0 1 0-1.5 0v.878A2.25 2.25 0 0 0 5.75 8.5h1.5v2.128a2.251 2.251 0 1 0 1.5 0V8.5h1.5a2.25 2.25 0 0 0 2.25-2.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75h-4.5A.75.75 0 0 1 5 6.25v-.878zm3.75 7.378a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm3-8.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0z" }) })
               ] }) }),
               token && !loadingInitial && /* @__PURE__ */ jsxs3(Fragment, { children: [
-                triggering ? /* @__PURE__ */ jsx3(Badge3, { tone: "caution", padding: 2, children: "Triggering\u2026" }) : /* @__PURE__ */ jsx3(StatusBadge, { state: latest?.state, showSpinner: true }),
+                triggering ? /* @__PURE__ */ jsx3(Badge3, { tone: "caution", padding: 2, children: "Triggering\u2026" }) : /* @__PURE__ */ jsx3(StatusBadge, { state: latest?.state }),
                 isActiveState(latest?.state) && /* @__PURE__ */ jsx3(
                   Button2,
                   {
@@ -468,7 +475,10 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                     style: { cursor: "pointer" }
                   }
                 ),
-                isActive && elapsed > 0 ? /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: formatDuration(elapsed) }) : !isActive && deployedAt ? /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: deployedAt }) : null
+                isActive && elapsed > 0 ? /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 1, children: [
+                  /* @__PURE__ */ jsx3(Spinner3, { muted: true, style: { marginLeft: 4 } }),
+                  /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: formatDuration(elapsed) })
+                ] }) : !isActive && deployedAt ? /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: deployedAt }) : null
               ] })
             ] }),
             /* @__PURE__ */ jsx3(
@@ -567,8 +577,9 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                 creator
               ] }),
               latest?.state === "READY" && latest.ready && latest.created && /* @__PURE__ */ jsxs3(Text2, { size: 1, muted: true, children: [
-                "\xB7 ",
-                formatDuration(Math.floor((latest.ready - latest.created) / 1e3))
+                "Took ",
+                formatDuration(Math.floor((latest.ready - latest.created) / 1e3)),
+                " to build"
               ] }),
               latest?.url && latest.state === "READY" && /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsx3(
                 Tooltip,
@@ -711,7 +722,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
               text: "Deploy",
               tone: "primary",
               loading: triggering,
-              disabled: isActive,
+              disabled: isActive || clicked,
               onClick: deploy,
               style: {
                 flex: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liiift-studio/deploy-vercel-from-sanity",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Sanity Studio plugin — trigger and monitor Vercel deployments with full status, history, and build logs. Supports v3, v4, and v5.",
   "license": "MIT",
   "author": "Liiift Studio",

package/src/components/DeployItem.tsx

@@ -1,6 +1,5 @@
 // Per-deploy-target card — shows status, build timer, history, cancel, deploy, copy URL, and error logs
 import { useState, useEffect, useCallback, useRef } from 'react'
-import { flushSync } from 'react-dom'
 import {
 	Card, Box, Stack, Flex, Text, Button, Tooltip, Badge, Spinner,
 	MenuButton, Menu, MenuItem, Code, useToast,
@@ -32,6 +31,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	const [deployments, setDeployments]      = useState<VercelDeployment[]>([])
 	const [loadingInitial, setLoadingInitial] = useState(true)
 	const [triggering, setTriggering]        = useState(false)
+	const [clicked, setClicked]              = useState(false)
 	const [canceling, setCanceling]          = useState(false)
 	const [deployError, setDeployError]      = useState<string | null>(null)
 	const [showHistory, setShowHistory]      = useState(false)
@@ -71,6 +71,11 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 		if (triggering && latest && latest.state !== undefined) setTriggering(false)
 	}, [triggering, latest])
 
+	// Clear clicked once triggering has propagated — loading animation takes over
+	useEffect(() => {
+		if (triggering) setClicked(false)
+	}, [triggering])
+
 	// ── Deploy-complete toast ─────────────────────────────────────────────────
 	const prevStateRef = useRef<string | undefined>(undefined)
 	useEffect(() => {
@@ -111,16 +116,20 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	}, [isActive, latest?.created])
 
 	// ── Actions ───────────────────────────────────────────────────────────────
-	const deploy = useCallback(async () => {
+	const deploy = useCallback(() => {
 		setDeployError(null)
-		flushSync(() => setTriggering(true))
-		try {
-			await triggerDeploy(target.url)
-			setTimeout(fetchDeployments, 2000)
-		} catch (err) {
-			setTriggering(false)
-			setDeployError(err instanceof Error ? err.message : 'Deploy failed')
-		}
+		setClicked(true)
+		setTriggering(true)
+		void (async () => {
+			try {
+				await triggerDeploy(target.url)
+				setTimeout(fetchDeployments, 2000)
+			} catch (err) {
+				setTriggering(false)
+				setClicked(false)
+				setDeployError(err instanceof Error ? err.message : 'Deploy failed')
+			}
+		})()
 	}, [target.url, fetchDeployments])
 
 	const cancel = useCallback(async () => {
@@ -217,7 +226,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 											{triggering ? (
 												<Badge tone="caution" padding={2}>Triggering…</Badge>
 											) : (
-												<StatusBadge state={latest?.state} showSpinner />
+												<StatusBadge state={latest?.state} />
 											)}
 											{isActiveState(latest?.state) && (
 												<Button
@@ -231,7 +240,10 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 												/>
 											)}
 											{isActive && elapsed > 0 ? (
-												<Text size={1} muted>{formatDuration(elapsed)}</Text>
+												<Flex align="center" gap={1}>
+													<Spinner muted style={{ marginLeft: 4 }} />
+													<Text size={1} muted>{formatDuration(elapsed)}</Text>
+												</Flex>
 											) : (!isActive && deployedAt) ? (
 												<Text size={1} muted>{deployedAt}</Text>
 											) : null}
@@ -354,7 +366,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 
 										{/* Build duration — only shown when READY and ready timestamp is available */}
 										{latest?.state === 'READY' && latest.ready && latest.created && (
-											<Text size={1} muted>· {formatDuration(Math.floor((latest.ready - latest.created) / 1000))}</Text>
+											<Text size={1} muted>Took {formatDuration(Math.floor((latest.ready - latest.created) / 1000))} to build</Text>
 										)}
 
 										{/* Visit link + copy URL */}
@@ -556,7 +568,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 							text="Deploy"
 							tone="primary"
 							loading={triggering}
-							disabled={isActive}
+							disabled={isActive || clicked}
 							onClick={deploy}
 							style={{
 								flex: 1,