ux improvement

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx

@@ -8,6 +8,7 @@ import { useParams } from 'next/navigation'
 import {
   Badge,
   Button,
+  Loader,
   Modal,
   ModalBody,
   ModalContent,
@@ -1109,19 +1110,20 @@ function GeneralFooter({
 }: GeneralFooterProps) {
   const isDeployBlocked =
     deployReadiness.isBlocked || isDeploymentSettling || isSubmitting || isUndeploying
-  const syncingLabel = deployReadiness.isSyncing ? deployReadiness.label : 'Syncing...'
   const blockedMessage =
     deployReadiness.isBlocked && !isDeploymentSettling && !isSubmitting && !isUndeploying
       ? deployReadiness.tooltip
       : null
+  const deployActionLoading = isSubmitting || isDeploymentSettling
 
   if (!isDeployed) {
     return (
       <ModalFooter className='items-center justify-between'>
         <div className='max-w-[260px] text-muted-foreground text-xs'>{blockedMessage}</div>
         <div className='flex items-center gap-2'>
           <Button variant='tertiary' onClick={onDeploy} disabled={isDeployBlocked}>
-            {isSubmitting ? 'Deploying...' : isDeploymentSettling ? syncingLabel : 'Deploy'}
+            {deployActionLoading && <Loader className='mr-1.5 h-3.5 w-3.5' animate />}
+            Deploy
           </Button>
         </div>
       </ModalFooter>
@@ -1140,9 +1142,10 @@ function GeneralFooter({
         <Button variant='default' onClick={onUndeploy} disabled={isUndeploying || isSubmitting}>
           {isUndeploying ? 'Undeploying...' : 'Undeploy'}
         </Button>
-        {needsRedeployment && (
+        {(needsRedeployment || isDeploymentSettling) && (
           <Button variant='tertiary' onClick={onRedeploy} disabled={isDeployBlocked}>
-            {isSubmitting ? 'Updating...' : isDeploymentSettling ? syncingLabel : 'Update'}
+            {deployActionLoading && <Loader className='mr-1.5 h-3.5 w-3.5' animate />}
+            Update
           </Button>
         )}
       </div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx

@@ -106,8 +106,8 @@ export function Deploy({
   }
 
   const getButtonLabel = () => {
-    if (isDeploymentSettling) {
-      return deployReadiness.isSyncing ? deployReadiness.label : 'Syncing...'
+    if (isDeployed && (changeDetected || isDeploymentSettling)) {
+      return 'Update'
     }
     if (changeDetected) {
       return 'Update'
@@ -135,7 +135,9 @@ export function Deploy({
               onClick={onDeployClick}
               disabled={isRegistryLoading || isDisabled}
             >
-              {isDeploying && <Loader className='h-[13px] w-[13px]' animate />}
+              {(isDeploying || isDeploymentSettling) && (
+                <Loader className='h-[13px] w-[13px]' animate />
+              )}
               {getButtonLabel()}
             </Button>
           </span>