@liiift-studio/deploy-vercel-from-sanity 1.0.9 → 1.0.10

package/dist/index.js

@@ -283,12 +283,13 @@ function DeployHistory({ target, token, onClose }) {
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var POLL_INTERVAL_MS = 5e3;
 var LABEL_WIDTH = 64;
+var PENDING_TIMEOUT_MS = 6e4;
 function DeployItem({ target, token, onDelete, onEdit }) {
   const { projectId, hookId } = parseHookUrl(target.url);
   const toast = (0, import_ui3.useToast)();
   const [deployments, setDeployments] = (0, import_react2.useState)([]);
   const [loadingInitial, setLoadingInitial] = (0, import_react2.useState)(true);
-  const [triggering, setTriggering] = (0, import_react2.useState)(false);
+  const [pendingSince, setPendingSince] = (0, import_react2.useState)(null);
   const [canceling, setCanceling] = (0, import_react2.useState)(false);
   const [deployError, setDeployError] = (0, import_react2.useState)(null);
   const [showHistory, setShowHistory] = (0, import_react2.useState)(false);
@@ -299,8 +300,10 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   const [errorLines, setErrorLines] = (0, import_react2.useState)([]);
   const [loadingLogs, setLoadingLogs] = (0, import_react2.useState)(false);
   const [logError, setLogError] = (0, import_react2.useState)(null);
+  const triggeredFromUidRef = (0, import_react2.useRef)(void 0);
   const latest = deployments[0];
-  const isActive = triggering || isActiveState(latest?.state);
+  const isPending = pendingSince !== null;
+  const isActive = isPending || isActiveState(latest?.state);
   const fetchDeployments = (0, import_react2.useCallback)(async () => {
     if (!projectId || !hookId || !token) return;
     try {
@@ -319,8 +322,14 @@ function DeployItem({ target, token, onDelete, onEdit }) {
     return () => clearInterval(id);
   }, [isActive, fetchDeployments]);
   (0, import_react2.useEffect)(() => {
-    if (triggering && latest && latest.state !== void 0) setTriggering(false);
-  }, [triggering, latest]);
+    if (!isPending) return;
+    if (latest?.uid && latest.uid !== triggeredFromUidRef.current) setPendingSince(null);
+  }, [isPending, latest?.uid]);
+  (0, import_react2.useEffect)(() => {
+    if (!isPending) return;
+    const id = setTimeout(() => setPendingSince(null), PENDING_TIMEOUT_MS);
+    return () => clearTimeout(id);
+  }, [isPending]);
   const prevStateRef = (0, import_react2.useRef)(void 0);
   (0, import_react2.useEffect)(() => {
     const current = latest?.state;
@@ -344,7 +353,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   const timerRef = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
     if (isActive) {
-      const start = latest?.created ?? Date.now();
+      const start = pendingSince ?? latest?.created ?? Date.now();
       setElapsed(Math.floor((Date.now() - start) / 1e3));
       timerRef.current = setInterval(() => {
         setElapsed(Math.floor((Date.now() - start) / 1e3));
@@ -356,22 +365,23 @@ function DeployItem({ target, token, onDelete, onEdit }) {
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
     };
-  }, [isActive, latest?.created]);
+  }, [isActive, pendingSince, latest?.created]);
   const deploy = (0, import_react2.useCallback)(() => {
     (0, import_react_dom.flushSync)(() => {
       setDeployError(null);
-      setTriggering(true);
+      triggeredFromUidRef.current = latest?.uid;
+      setPendingSince(Date.now());
     });
     void (async () => {
       try {
         await triggerDeploy(target.url);
         setTimeout(fetchDeployments, 2e3);
       } catch (err) {
-        setTriggering(false);
+        setPendingSince(null);
         setDeployError(err instanceof Error ? err.message : "Deploy failed");
       }
     })();
-  }, [target.url, fetchDeployments]);
+  }, [target.url, fetchDeployments, latest?.uid]);
   const cancel = (0, import_react2.useCallback)(async () => {
     if (!latest?.uid) return;
     setCanceling(true);
@@ -437,7 +447,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 }),
+                isPending ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusBadge, { state: "QUEUED" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StatusBadge, { state: latest?.state }),
                 isActiveState(latest?.state) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   import_ui3.Button,
                   {
@@ -450,10 +460,13 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                     style: { cursor: "pointer" }
                   }
                 ),
-                isActive && elapsed > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { align: "center", gap: 1, children: [
+                isPending ? (
+                  /* Optimistic — dimmed spinner only; no elapsed time until a real build exists */
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Spinner, { muted: true, style: { marginLeft: 4, opacity: 0.5 } })
+                ) : isActive ? /* @__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
+                ] }) : deployedAt ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Text, { size: 1, muted: true, children: deployedAt }) : null
               ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -696,6 +709,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
             {
               text: "Deploy",
               tone: "primary",
+              loading: isPending,
               disabled: isActive,
               onClick: deploy,
               style: {
@@ -936,7 +950,7 @@ function DeployTargetForm({ initial, onSaved, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "1.0.8";
+var VERSION = "1.0.10";
 
 // src/components/DeployTool.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -305,12 +305,13 @@ function DeployHistory({ target, token, onClose }) {
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS = 5e3;
 var LABEL_WIDTH = 64;
+var PENDING_TIMEOUT_MS = 6e4;
 function DeployItem({ target, token, onDelete, onEdit }) {
   const { projectId, hookId } = parseHookUrl(target.url);
   const toast = useToast();
   const [deployments, setDeployments] = useState2([]);
   const [loadingInitial, setLoadingInitial] = useState2(true);
-  const [triggering, setTriggering] = useState2(false);
+  const [pendingSince, setPendingSince] = useState2(null);
   const [canceling, setCanceling] = useState2(false);
   const [deployError, setDeployError] = useState2(null);
   const [showHistory, setShowHistory] = useState2(false);
@@ -321,8 +322,10 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   const [errorLines, setErrorLines] = useState2([]);
   const [loadingLogs, setLoadingLogs] = useState2(false);
   const [logError, setLogError] = useState2(null);
+  const triggeredFromUidRef = useRef(void 0);
   const latest = deployments[0];
-  const isActive = triggering || isActiveState(latest?.state);
+  const isPending = pendingSince !== null;
+  const isActive = isPending || isActiveState(latest?.state);
   const fetchDeployments = useCallback2(async () => {
     if (!projectId || !hookId || !token) return;
     try {
@@ -341,8 +344,14 @@ function DeployItem({ target, token, onDelete, onEdit }) {
     return () => clearInterval(id);
   }, [isActive, fetchDeployments]);
   useEffect2(() => {
-    if (triggering && latest && latest.state !== void 0) setTriggering(false);
-  }, [triggering, latest]);
+    if (!isPending) return;
+    if (latest?.uid && latest.uid !== triggeredFromUidRef.current) setPendingSince(null);
+  }, [isPending, latest?.uid]);
+  useEffect2(() => {
+    if (!isPending) return;
+    const id = setTimeout(() => setPendingSince(null), PENDING_TIMEOUT_MS);
+    return () => clearTimeout(id);
+  }, [isPending]);
   const prevStateRef = useRef(void 0);
   useEffect2(() => {
     const current = latest?.state;
@@ -366,7 +375,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
   const timerRef = useRef(null);
   useEffect2(() => {
     if (isActive) {
-      const start = latest?.created ?? Date.now();
+      const start = pendingSince ?? latest?.created ?? Date.now();
       setElapsed(Math.floor((Date.now() - start) / 1e3));
       timerRef.current = setInterval(() => {
         setElapsed(Math.floor((Date.now() - start) / 1e3));
@@ -378,22 +387,23 @@ function DeployItem({ target, token, onDelete, onEdit }) {
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
     };
-  }, [isActive, latest?.created]);
+  }, [isActive, pendingSince, latest?.created]);
   const deploy = useCallback2(() => {
     flushSync(() => {
       setDeployError(null);
-      setTriggering(true);
+      triggeredFromUidRef.current = latest?.uid;
+      setPendingSince(Date.now());
     });
     void (async () => {
       try {
         await triggerDeploy(target.url);
         setTimeout(fetchDeployments, 2e3);
       } catch (err) {
-        setTriggering(false);
+        setPendingSince(null);
         setDeployError(err instanceof Error ? err.message : "Deploy failed");
       }
     })();
-  }, [target.url, fetchDeployments]);
+  }, [target.url, fetchDeployments, latest?.uid]);
   const cancel = useCallback2(async () => {
     if (!latest?.uid) return;
     setCanceling(true);
@@ -459,7 +469,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 }),
+                isPending ? /* @__PURE__ */ jsx3(StatusBadge, { state: "QUEUED" }) : /* @__PURE__ */ jsx3(StatusBadge, { state: latest?.state }),
                 isActiveState(latest?.state) && /* @__PURE__ */ jsx3(
                   Button2,
                   {
@@ -472,10 +482,13 @@ function DeployItem({ target, token, onDelete, onEdit }) {
                     style: { cursor: "pointer" }
                   }
                 ),
-                isActive && elapsed > 0 ? /* @__PURE__ */ jsxs3(Flex3, { align: "center", gap: 1, children: [
+                isPending ? (
+                  /* Optimistic — dimmed spinner only; no elapsed time until a real build exists */
+                  /* @__PURE__ */ jsx3(Spinner3, { muted: true, style: { marginLeft: 4, opacity: 0.5 } })
+                ) : isActive ? /* @__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
+                ] }) : deployedAt ? /* @__PURE__ */ jsx3(Text2, { size: 1, muted: true, children: deployedAt }) : null
               ] })
             ] }),
             /* @__PURE__ */ jsx3(
@@ -718,6 +731,7 @@ function DeployItem({ target, token, onDelete, onEdit }) {
             {
               text: "Deploy",
               tone: "primary",
+              loading: isPending,
               disabled: isActive,
               onClick: deploy,
               style: {
@@ -969,7 +983,7 @@ function DeployTargetForm({ initial, onSaved, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "1.0.8";
+var VERSION = "1.0.10";
 
 // src/components/DeployTool.tsx
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liiift-studio/deploy-vercel-from-sanity",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "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

@@ -17,6 +17,8 @@ import type { DeployTarget, VercelDeployment } from '../types'
 
 const POLL_INTERVAL_MS = 5_000
 const LABEL_WIDTH      = 64
+/** Max time (ms) to hold the optimistic pending state before giving up and deferring to real API status */
+const PENDING_TIMEOUT_MS = 60_000
 
 interface DeployItemProps {
 	target: DeployTarget
@@ -31,7 +33,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 [pendingSince, setPendingSince]    = useState<number | null>(null)
 	const [canceling, setCanceling]          = useState(false)
 	const [deployError, setDeployError]      = useState<string | null>(null)
 	const [showHistory, setShowHistory]      = useState(false)
@@ -43,8 +45,13 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	const [loadingLogs, setLoadingLogs]      = useState(false)
 	const [logError, setLogError]            = useState<string | null>(null)
 
-	const latest   = deployments[0]
-	const isActive = triggering || isActiveState(latest?.state)
+	/** uid of the deployment that was latest when Deploy was clicked — lets us tell the optimistic state apart from a genuinely new deployment */
+	const triggeredFromUidRef = useRef<string | undefined>(undefined)
+
+	const latest = deployments[0]
+	/** True between the click and the API returning a new deployment — drives the optimistic "Queued" state */
+	const isPending = pendingSince !== null
+	const isActive  = isPending || isActiveState(latest?.state)
 
 	// ── Fetch deployments ──────────────────────────────────────────────────────
 	const fetchDeployments = useCallback(async () => {
@@ -67,9 +74,20 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 		return () => clearInterval(id)
 	}, [isActive, fetchDeployments])
 
+	// Hand off from the optimistic state only once the API returns a deployment
+	// that is not the one which was already latest when Deploy was clicked.
+	useEffect(() => {
+		if (!isPending) return
+		if (latest?.uid && latest.uid !== triggeredFromUidRef.current) setPendingSince(null)
+	}, [isPending, latest?.uid])
+
+	// Safety net — never strand the card in the optimistic state if the new
+	// deployment never appears (hook accepted but nothing was queued).
 	useEffect(() => {
-		if (triggering && latest && latest.state !== undefined) setTriggering(false)
-	}, [triggering, latest])
+		if (!isPending) return
+		const id = setTimeout(() => setPendingSince(null), PENDING_TIMEOUT_MS)
+		return () => clearTimeout(id)
+	}, [isPending])
 
 	//── Deploy-complete toast ─────────────────────────────────────────────────
 	const prevStateRef = useRef<string | undefined>(undefined)
@@ -98,7 +116,8 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
 	useEffect(() => {
 		if (isActive) {
-			const start = latest?.created ?? Date.now()
+			// While optimistic, count from the click; once real, count from the deployment's own timestamp
+			const start = pendingSince ?? latest?.created ?? Date.now()
 			setElapsed(Math.floor((Date.now() - start) / 1000))
 			timerRef.current = setInterval(() => {
 				setElapsed(Math.floor((Date.now() - start) / 1000))
@@ -108,24 +127,27 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 			if (timerRef.current) clearInterval(timerRef.current)
 		}
 		return () => { if (timerRef.current) clearInterval(timerRef.current) }
-	}, [isActive, latest?.created])
+	}, [isActive, pendingSince, latest?.created])
 
 	// ── Actions ───────────────────────────────────────────────────────────────
 	const deploy = useCallback(() => {
+		// Paint the optimistic "Queued" state in the same frame as the click,
+		// before the hook request is even sent
 		flushSync(() => {
 			setDeployError(null)
-			setTriggering(true)
+			triggeredFromUidRef.current = latest?.uid
+			setPendingSince(Date.now())
 		})
 		void (async () => {
 			try {
 				await triggerDeploy(target.url)
 				setTimeout(fetchDeployments, 2000)
 			} catch (err) {
-				setTriggering(false)
+				setPendingSince(null)
 				setDeployError(err instanceof Error ? err.message : 'Deploy failed')
 			}
 		})()
-	}, [target.url, fetchDeployments])
+	}, [target.url, fetchDeployments, latest?.uid])
 
 	const cancel = useCallback(async () => {
 		if (!latest?.uid) return
@@ -218,8 +240,8 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 									)}
 									{token && !loadingInitial && (
 										<>
-											{triggering ? (
-												<Badge tone="caution" padding={2}>Triggering…</Badge>
+											{isPending ? (
+												<StatusBadge state="QUEUED" />
 											) : (
 												<StatusBadge state={latest?.state} />
 											)}
@@ -234,12 +256,15 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 													style={{ cursor: 'pointer' }}
 												/>
 											)}
-											{isActive && elapsed > 0 ? (
+											{isPending ? (
+												/* Optimistic — dimmed spinner only; no elapsed time until a real build exists */
+												<Spinner muted style={{ marginLeft: 4, opacity: 0.5 }} />
+											) : isActive ? (
 												<Flex align="center" gap={1}>
 													<Spinner muted style={{ marginLeft: 4 }} />
 													<Text size={1} muted>{formatDuration(elapsed)}</Text>
 												</Flex>
-											) : (!isActive && deployedAt) ? (
+											) : deployedAt ? (
 												<Text size={1} muted>{deployedAt}</Text>
 											) : null}
 										</>
@@ -562,6 +587,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 						<Button
 							text="Deploy"
 							tone="primary"
+							loading={isPending}
 							disabled={isActive}
 							onClick={deploy}
 							style={{

package/src/version.ts

@@ -1,2 +1,2 @@
 // Package version — keep in sync with package.json
-export const VERSION = '1.0.8'
+export const VERSION = '1.0.10'