Add a bit of visual feedback when clicking Refresh Deployments for Vercel (#2184)

 > [!NOTE] > Enhances Vercel deployments refresh UX to provide consistent visual feedback. > > - Introduces `isRefreshing` and wraps `getDeployments` to enforce a 750ms minimum loading time > - Disables the "Refresh Deployments" button during load and shows a spinner with "Refreshing..." > - Combines states into `isLoadingOrRefreshing` for button/label control; minor label text change > - package-lock version bump to `0.33.0-beta.3` > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit e65e3a06d7fe761e183bf1acaee88d40e9197895. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>   --- ## Summary by cubic Adds clear, consistent feedback when refreshing Vercel deployments to prevent flicker and show progress. The button now shows a spinner and "Refreshing..." and is disabled during the fetch. - **New Features** - Ensures visible feedback with a 750ms minimum loading time. - Disables the button while loading and updates the label to "Refreshing...". <sup>Written for commit e65e3a06d7fe761e183bf1acaee88d40e9197895. Summary will update on new commits.</sup>

Add a bit of visual feedback when clicking Refresh Deployments for Vercel (#2184)
ea229c75 · Will Chen · GitHub · d4072907 · ea229c75 · ea229c75
--- a/package-lock.json
+++ b/package-lock.json
 {
  "name": "dyad",
-  "version": "0.33.0-beta.2",
+  "version": "0.33.0-beta.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "dyad",
-      "version": "0.33.0-beta.2",
+      "version": "0.33.0-beta.3",
      "license": "MIT",
      "dependencies": {
        "@ai-sdk/amazon-bedrock": "^4.0.9",

--- a/src/components/VercelConnector.tsx
+++ b/src/components/VercelConnector.tsx
@@ -47,16 +47,29 @@ function ConnectedVercelConnector({
  app,
  refreshApp,
 }: ConnectedVercelConnectorProps) {
+  const [isRefreshing, setIsRefreshing] = useState(false);
  const {
    deployments,
    isLoading: isLoadingDeployments,
    error: deploymentsError,
-    getDeployments: handleGetDeployments,
+    getDeployments,
    disconnectProject,
    isDisconnecting,
    disconnectError,
  } = useVercelDeployments(appId);
+  const handleGetDeployments = async () => {
+    setIsRefreshing(true);
+    try {
+      const minLoadingTime = new Promise((resolve) => setTimeout(resolve, 750));
+      await Promise.all([getDeployments(), minLoadingTime]);
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+  const isLoadingOrRefreshing = isLoadingDeployments || isRefreshing;
  const handleDisconnectProject = async () => {
    await disconnectProject();
    refreshApp();
@@ -106,8 +119,8 @@ function ConnectedVercelConnector({
        </div>
      )}
      <div className="mt-2 flex gap-2">
-        <Button onClick={handleGetDeployments} disabled={isLoadingDeployments}>
+        <Button onClick={handleGetDeployments} disabled={isLoadingOrRefreshing}>
-          {isLoadingDeployments ? (
+          {isLoadingOrRefreshing ? (
            <>
              <svg
                className="animate-spin h-5 w-5 mr-2 inline"
@@ -130,7 +143,7 @@ function ConnectedVercelConnector({
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                ></path>
              </svg>
-              Getting Deployments...
+              Refreshing...
            </>
          ) : (
            "Refresh Deployments"