refactor: optimize Vibe panel layout and loading experience (#31144)

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>

web/app/components/workflow/panel/vibe-panel/index.tsx

@@ -186,7 +186,7 @@ const VibePanel: FC = () => {
     return null
 
   const renderLoading = (
-    <div className="flex h-full w-0 grow flex-col items-center justify-center space-y-3">
+    <div className="flex h-full w-full grow flex-col items-center justify-center space-y-3">
       <Loading />
       <div className="text-[13px] text-text-tertiary">{t('vibe.generatingFlowchart', { ns: 'workflow' })}</div>
     </div>
@@ -275,7 +275,7 @@ const VibePanel: FC = () => {
 
         {!isVibeGenerating && vibePanelIntent === 'off_topic' && renderOffTopic}
         {!isVibeGenerating && vibePanelIntent !== 'off_topic' && (vibePanelPreviewNodes.length > 0 || vibePanelMermaidCode) && (
-          <div className="h-full w-0 grow bg-background-default-subtle p-6 pb-0">
+          <div className="relative h-full w-0 grow bg-background-default-subtle p-6 pb-0">
             <div className="flex h-full flex-col">
               <div className="mb-3 flex shrink-0 items-center justify-between">
                 <div className="flex shrink-0 flex-col">
@@ -308,16 +308,23 @@ const VibePanel: FC = () => {
               <div className="flex grow flex-col overflow-hidden pb-6">
                 <WorkflowPreview
                   key={currentVersionIndex}
+                  fitView
+                  fitViewOptions={{ padding: 0.2 }}
                   nodes={vibePanelPreviewNodes}
                   edges={vibePanelPreviewEdges}
-                  viewport={{ x: 0, y: 0, zoom: 1 }}
                   className="rounded-lg border border-divider-subtle"
                 />
               </div>
             </div>
+
+            {isVibeGenerating && (
+              <div className="absolute bottom-0 left-0 right-0 top-0 z-[10] bg-background-default-subtle">
+                {renderLoading}
+              </div>
+            )}
+
           </div>
         )}
-        {isVibeGenerating && renderLoading}
         {!isVibeGenerating && vibePanelIntent !== 'off_topic' && vibePanelPreviewNodes.length === 0 && !vibePanelMermaidCode && <ResPlaceholder />}
       </div>
     </Modal>

web/app/components/workflow/workflow-preview/index.tsx

@@ -2,6 +2,7 @@
 
 import type {
   EdgeChange,
+  FitViewOptions,
   NodeChange,
   Viewport,
 } from 'reactflow'
@@ -59,8 +60,10 @@ const edgeTypes = {
 type WorkflowPreviewProps = {
   nodes: Node[]
   edges: Edge[]
-  viewport: Viewport
+  viewport?: Viewport
   className?: string
+  fitView?: boolean
+  fitViewOptions?: FitViewOptions
   miniMapToRight?: boolean
 }
 const WorkflowPreview = ({
@@ -68,6 +71,8 @@ const WorkflowPreview = ({
   edges,
   viewport,
   className,
+  fitView,
+  fitViewOptions,
   miniMapToRight,
 }: WorkflowPreviewProps) => {
   const [nodesData, setNodesData] = useState(() => initialNodes(nodes, edges))
@@ -125,6 +130,8 @@ const WorkflowPreview = ({
         selectionKeyCode={null}
         selectionMode={SelectionMode.Partial}
         minZoom={0.25}
+        fitView={fitView}
+        fitViewOptions={fitViewOptions}
       >
         <Background
           gap={[14, 14]}