From 03ca8b500e9f9772e4a494ff2eed7ba6d1f203b0 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Mon, 11 May 2026 20:28:40 +0800
Subject: [PATCH] tweaks

---
 .../deployments/components/deploy-drawer.tsx  | 14 ++-----------
 .../components/deploy-drawer/form.tsx         | 20 ++++++++++++++++---
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/web/features/deployments/components/deploy-drawer.tsx b/web/features/deployments/components/deploy-drawer.tsx
index 06fdab4f70..934a072206 100644
--- a/web/features/deployments/components/deploy-drawer.tsx
+++ b/web/features/deployments/components/deploy-drawer.tsx
@@ -13,7 +13,7 @@ import {
   deployDrawerOpenAtom,
   deployDrawerReleaseIdAtom,
 } from '../store'
-import { deployedRows, environmentOptionsFromOptionsReply } from '../utils'
+import { environmentOptionsFromOptionsReply } from '../utils'
 import { DeployForm } from './deploy-drawer/form'
 
 export function DeployDrawer() {
@@ -38,18 +38,9 @@ export function DeployDrawer() {
   const { data: environmentOptionsReply } = useQuery(consoleQuery.enterprise.appDeploy.listDeploymentEnvironmentOptions.queryOptions({
     enabled: open,
   }))
-  const { data: environmentDeployments } = useQuery(consoleQuery.enterprise.appDeploy.listRuntimeInstances.queryOptions({
-    input: drawerAppInstanceId
-      ? {
-          params: { appInstanceId: drawerAppInstanceId },
-        }
-      : skipToken,
-    enabled: open && Boolean(drawerAppInstanceId),
-  }))
 
   const environments = environmentOptionsFromOptionsReply(environmentOptionsReply)
   const releases = releaseHistory?.data?.filter(release => release.id) ?? []
-  const deploymentRows = deployedRows(environmentDeployments?.data)
   const defaultReleaseId = releases[0]?.id
   const formKey = `${drawerAppInstanceId ?? 'none'}-${drawerEnvironmentId ?? 'any'}-${drawerReleaseId ?? 'new'}-${open ? '1' : '0'}`
 
@@ -62,7 +53,7 @@ export function DeployDrawer() {
         <DialogCloseButton />
         {!drawerAppInstanceId
           ? <div className="p-4 text-text-tertiary">{t('deployDrawer.notFound')}</div>
-          : (!releaseHistory || !environmentOptionsReply || !environmentDeployments)
+          : (!releaseHistory || !environmentOptionsReply)
               ? (
                   <div className="flex items-center gap-2 p-4 system-sm-regular text-text-tertiary">
                     <span className="size-4 animate-spin rounded-full border-2 border-components-panel-border border-t-transparent" />
@@ -75,7 +66,6 @@ export function DeployDrawer() {
                     appInstanceId={drawerAppInstanceId}
                     environments={environments}
                     releases={releases}
-                    deploymentRows={deploymentRows}
                     defaultReleaseId={defaultReleaseId}
                     lockedEnvId={drawerEnvironmentId}
                     presetReleaseId={drawerReleaseId}
diff --git a/web/features/deployments/components/deploy-drawer/form.tsx b/web/features/deployments/components/deploy-drawer/form.tsx
index 0c84826c72..b9e962da94 100644
--- a/web/features/deployments/components/deploy-drawer/form.tsx
+++ b/web/features/deployments/components/deploy-drawer/form.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import type { DeploymentBindingOptionSlot, DeploymentRuntimeBinding, ReleaseRow, RuntimeInstanceRow } from '@dify/contracts/enterprise/types.gen'
+import type { DeploymentBindingOptionSlot, DeploymentRuntimeBinding, ReleaseRow } from '@dify/contracts/enterprise/types.gen'
 import type { EnvironmentOption } from '@/features/deployments/types'
 import { Button } from '@langgenius/dify-ui/button'
 import { DialogDescription, DialogTitle } from '@langgenius/dify-ui/dialog'
@@ -13,6 +13,7 @@ import { consoleQuery } from '@/service/client'
 import { closeDeployDrawerAtom } from '../../store'
 import {
   activeRelease,
+  deployedRows,
   environmentId,
   environmentMode,
   environmentName,
@@ -30,7 +31,6 @@ type DeployFormProps = {
   appInstanceId: string
   environments: EnvironmentOption[]
   releases: ReleaseRow[]
-  deploymentRows: RuntimeInstanceRow[]
   defaultReleaseId?: string
   lockedEnvId?: string
   presetReleaseId?: string
@@ -208,7 +208,6 @@ export function DeployForm({
   appInstanceId,
   environments,
   releases,
-  deploymentRows,
   defaultReleaseId,
   lockedEnvId,
   presetReleaseId,
@@ -216,6 +215,11 @@ export function DeployForm({
   const { t } = useTranslation('deployments')
   const closeDeployDrawer = useSetAtom(closeDeployDrawerAtom)
   const startDeploy = useMutation(consoleQuery.enterprise.appDeploy.createDeployment.mutationOptions())
+  const { data: environmentDeployments } = useQuery(consoleQuery.enterprise.appDeploy.listRuntimeInstances.queryOptions({
+    input: {
+      params: { appInstanceId },
+    },
+  }))
   const presetRelease = presetReleaseId ? releases.find(r => r.id === presetReleaseId) : undefined
   const displayedRelease: ReleaseRow | undefined = presetRelease ?? (presetReleaseId ? { id: presetReleaseId } : undefined)
   const isExistingRelease = Boolean(presetReleaseId)
@@ -231,6 +235,7 @@ export function DeployForm({
   const selectedRelease = releases.find(release => release.id === selectedReleaseId)
   const targetReleaseId = displayedRelease?.id ?? selectedRelease?.id ?? selectedReleaseId
   const targetRelease = displayedRelease ?? selectedRelease ?? (targetReleaseId ? { id: targetReleaseId } : undefined)
+  const deploymentRows = deployedRows(environmentDeployments?.data)
   const selectedDeploymentRow = deploymentRows.find(row => environmentId(row.environment) === selectedEnvironmentId)
   const action = releaseDeploymentAction({
     targetRelease,
@@ -315,6 +320,15 @@ export function DeployForm({
     })()
   }
 
+  if (!environmentDeployments) {
+    return (
+      <div className="flex items-center gap-2 p-4 system-sm-regular text-text-tertiary">
+        <span className="size-4 animate-spin rounded-full border-2 border-components-panel-border border-t-transparent" />
+        {t('createModal.loadingApps')}
+      </div>
+    )
+  }
+
   return (
     <div className="flex flex-col gap-5">
       <div>