fix(workflow): clarify resource deploy loading states

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx

@@ -383,11 +383,8 @@ export function EmbeddedWorkflowActions({ workspaceId, workflowId }: EmbeddedWor
   const isRunButtonDisabled =
     !isExecuting &&
     (isUsageGateLoading || (!effectivePermissions.canRead && !effectivePermissions.isLoading))
-  const isWorkflowLockDataLoading =
-    isWorkflowMapLoading || isFolderMapLoading || !workflowMap || !folderMap
-  const isWorkflowLocked =
-    isWorkflowLockDataLoading ||
-    isWorkflowEffectivelyLocked(workflowMap?.[workflowId], folderMap ?? {})
+  const isWorkflowLockDataLoading = isWorkflowMapLoading || isFolderMapLoading
+  const isWorkflowLocked = isWorkflowEffectivelyLocked(workflowMap?.[workflowId], folderMap ?? {})
 
   const handleRun = async () => {
     setActiveWorkflow(workflowId)
@@ -464,7 +461,8 @@ export function EmbeddedWorkflowActions({ workspaceId, workflowId }: EmbeddedWor
         userPermissions={effectivePermissions}
         className={RESOURCE_TAB_ICON_BUTTON_CLASS}
         compact
-        disabled={isWorkflowLocked}
+        disabled={isWorkflowLockDataLoading || isWorkflowLocked}
+        disabledTooltip={isWorkflowLockDataLoading ? 'Loading workflow lock status...' : undefined}
       />
     </>
   )

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

@@ -96,7 +96,10 @@ import { Deploy } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/
 let container: HTMLDivElement
 let root: Root
 
-function renderDeploy(overrides: Partial<typeof mockState> = {}) {
+function renderDeploy(
+  overrides: Partial<typeof mockState> = {},
+  props: { disabled?: boolean; disabledTooltip?: string } = {}
+) {
   Object.assign(mockState, overrides)
   act(() => {
     root.render(
@@ -112,6 +115,7 @@ function renderDeploy(overrides: Partial<typeof mockState> = {}) {
         }}
         compact
         className='resource-action'
+        {...props}
       />
     )
   })
@@ -168,6 +172,14 @@ describe('Deploy compact mode', () => {
     renderDeploy({ hydrationWorkflowId: 'workflow-2', registryActiveWorkflowId: 'workflow-2' })
 
     expect(container.querySelector('button')?.disabled).toBe(true)
+    expect(container.textContent).toContain('Loading workflow...')
+  })
+
+  it('uses a caller-provided tooltip for external loading states', () => {
+    renderDeploy({}, { disabled: true, disabledTooltip: 'Loading workflow lock status...' })
+
+    expect(container.querySelector('button')?.disabled).toBe(true)
+    expect(container.textContent).toContain('Loading workflow lock status...')
   })
 
   it.each([

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

@@ -20,6 +20,7 @@ interface DeployProps {
   className?: string
   compact?: boolean
   disabled?: boolean
+  disabledTooltip?: string
 }
 
 export function Deploy({
@@ -28,6 +29,7 @@ export function Deploy({
   className,
   compact = false,
   disabled = false,
+  disabledTooltip,
 }: DeployProps) {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const registryActiveWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
@@ -89,14 +91,17 @@ export function Deploy({
   }
 
   const getTooltipText = () => {
+    if (isRegistryLoading) {
+      return 'Loading workflow...'
+    }
     if (isEmpty) {
       return 'Cannot deploy an empty workflow'
     }
     if (!canDeploy) {
       return 'Admin permissions required'
     }
     if (disabled) {
-      return 'Workflow is locked'
+      return disabledTooltip ?? 'Workflow is locked'
     }
     if (isDeploying) {
       return 'Deploying...'