diff --git a/web/app/components/workflow/nodes/agent-v2/components/agent-orchestrate-panel-content.tsx b/web/app/components/workflow/nodes/agent-v2/components/agent-orchestrate-panel-content.tsx
index 36ad0058818..51ab67e5486 100644
--- a/web/app/components/workflow/nodes/agent-v2/components/agent-orchestrate-panel-content.tsx
+++ b/web/app/components/workflow/nodes/agent-v2/components/agent-orchestrate-panel-content.tsx
@@ -72,6 +72,7 @@ import { systemFeaturesQueryOptions } from '@/features/system-features/client'
 import { consoleQuery } from '@/service/console'
 import { FlowType } from '@/types/common'
 import { useWorkflowInlineAgentConfigureSync } from '../agent-soul-config'
+import { InlineAgentLoading } from './inline-agent-loading'
 
 type WorkflowRosterAgentOrchestratePanelContentProps = {
   agentId?: string
@@ -188,11 +189,7 @@ export function WorkflowInlineAgentConfigureWorkspace(
       : undefined
 
   if (!agentId) {
-    return (
-      <div className="flex h-full min-h-80 items-center justify-center bg-components-panel-bg">
-        <LoadingPlaceholder className="h-full" />
-      </div>
-    )
+    return <InlineAgentLoading />
   }
 
   const composerSessionKey = `${nodeId}:${agentId}`
@@ -239,11 +236,7 @@ function WorkflowInlineAgentConfigureWorkspaceComposerScope({
   const composerSessionKey = `${props.nodeId}:${agentId}`
 
   if (!agentSoulConfig || buildDraft.isPending) {
-    return (
-      <div className="flex h-full min-h-80 items-center justify-center bg-components-panel-bg">
-        <LoadingPlaceholder className="h-full" />
-      </div>
-    )
+    return <InlineAgentLoading />
   }
 
   return (
diff --git a/web/app/components/workflow/nodes/agent-v2/components/agent-roster-field.tsx b/web/app/components/workflow/nodes/agent-v2/components/agent-roster-field.tsx
index eb0926ec7df..14c887a2788 100644
--- a/web/app/components/workflow/nodes/agent-v2/components/agent-roster-field.tsx
+++ b/web/app/components/workflow/nodes/agent-v2/components/agent-roster-field.tsx
@@ -28,13 +28,14 @@ import {
 import { Field, FieldLabel } from '@langgenius/dify-ui/field'
 import { IconButton } from '@langgenius/dify-ui/icon-button'
 import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from '@langgenius/dify-ui/popover'
-import { useState } from 'react'
+import { Suspense, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
 import { AgentSelectorContent } from '@/app/components/workflow/block-selector/agent-selector'
 import { getAgentACLCapabilities } from '@/features/agent-v2/acl'
 import { useCanCreateAgents } from '@/features/agent-v2/permissions'
 import { EditInConsoleLink } from './edit-in-console-link'
+import { InlineAgentLoading } from './inline-agent-loading'
 
 const i18nPrefix = 'nodes.agent'
 type AgentRosterDrawerMode = 'setup' | 'detail'
@@ -322,7 +323,9 @@ function AgentRosterInlineConfigureDialog({
         <DialogDescription className="sr-only">
           {t(($) => $[`${i18nPrefix}.roster.inlineSetup.description`], { ns: 'workflowAgent' })}
         </DialogDescription>
-        {children ?? <div className="h-full min-h-80 bg-components-panel-bg" />}
+        <Suspense fallback={<InlineAgentLoading />}>
+          {children ?? <div className="h-full min-h-80 bg-components-panel-bg" />}
+        </Suspense>
       </DialogContent>
     </Dialog>
   )
diff --git a/web/app/components/workflow/nodes/agent-v2/components/inline-agent-loading.tsx b/web/app/components/workflow/nodes/agent-v2/components/inline-agent-loading.tsx
new file mode 100644
index 00000000000..86d5fa2d4c3
--- /dev/null
+++ b/web/app/components/workflow/nodes/agent-v2/components/inline-agent-loading.tsx
@@ -0,0 +1,9 @@
+import { LoadingPlaceholder } from '@/app/components/base/loading-placeholder'
+
+export function InlineAgentLoading() {
+  return (
+    <div className="flex h-full min-h-80 items-center justify-center bg-components-panel-bg">
+      <LoadingPlaceholder className="h-full" />
+    </div>
+  )
+}