fix

web/app/components/workflow/hooks/use-nodes-sync-draft.ts

@@ -1,9 +1,6 @@
 import { useCallback } from 'react'
 import produce from 'immer'
-import {
-  useReactFlow,
-  useStoreApi,
-} from 'reactflow'
+import { useStoreApi } from 'reactflow'
 import {
   useStore,
   useWorkflowStore,
@@ -17,7 +14,6 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 export const useNodesSyncDraft = () => {
   const store = useStoreApi()
   const workflowStore = useWorkflowStore()
-  const reactFlow = useReactFlow()
   const featuresStore = useFeaturesStore()
   const { getNodesReadOnly } = useNodesReadOnly()
   const debouncedSyncWorkflowDraft = useStore(s => s.debouncedSyncWorkflowDraft)
@@ -26,8 +22,9 @@ export const useNodesSyncDraft = () => {
     const {
       getNodes,
       edges,
+      transform,
     } = store.getState()
-    const { getViewport } = reactFlow
+    const [x, y, zoom] = transform
     const appId = useAppStore.getState().appDetail?.id
 
     if (appId) {
@@ -60,7 +57,11 @@ export const useNodesSyncDraft = () => {
           graph: {
             nodes: producedNodes,
             edges: producedEdges,
-            viewport: getViewport(),
+            viewport: {
+              x,
+              y,
+              zoom,
+            },
           },
           features: {
             opening_statement: features.opening?.opening_statement || '',
@@ -77,7 +78,7 @@ export const useNodesSyncDraft = () => {
         workflowStore.getState().setDraftUpdatedAt(res.updated_at)
       })
     }
-  }, [store, reactFlow, featuresStore, workflowStore])
+  }, [store, featuresStore, workflowStore])
 
   const handleSyncWorkflowDraft = useCallback((sync?: boolean) => {
     if (getNodesReadOnly())

web/app/components/workflow/hooks/use-workflow.ts

@@ -388,7 +388,7 @@ export const useWorkflowInit = () => {
   const nodesInitialData = useNodesInitialData()
   const { handleFetchAllTools } = useFetchToolsData()
   const appDetail = useAppStore(state => state.appDetail)!
-  const { data, error, mutate } = useSWR(`/apps/${appDetail.id}/workflows/draft`, fetchWorkflowDraft)
+  const { data, isLoading, error, mutate } = useSWR(`/apps/${appDetail.id}/workflows/draft`, fetchWorkflowDraft)
 
   const handleFetchPreloadData = useCallback(async () => {
     try {
@@ -446,7 +446,10 @@ export const useWorkflowInit = () => {
     })
   }
 
-  return data
+  return {
+    data,
+    isLoading,
+  }
 }
 
 export const useWorkflowReadOnly = () => {

web/app/components/workflow/index.tsx

@@ -82,7 +82,7 @@ const Workflow: FC<WorkflowProps> = memo(({
     return () => {
       handleSyncWorkflowDraft(true)
     }
-  }, [handleSyncWorkflowDraft])
+  }, [])
 
   const {
     handleNodeDragStart,
@@ -130,8 +130,8 @@ const Workflow: FC<WorkflowProps> = memo(({
       <ReactFlow
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
-        defaultNodes={nodes}
-        defaultEdges={edges}
+        nodes={nodes}
+        edges={edges}
         onNodeDragStart={handleNodeDragStart}
         onNodeDrag={handleNodeDrag}
         onNodeDragStop={handleNodeDragStop}
@@ -167,11 +167,13 @@ const Workflow: FC<WorkflowProps> = memo(({
     </div>
   )
 })
-
 Workflow.displayName = 'Workflow'
 
 const WorkflowWrap = memo(() => {
-  const data = useWorkflowInit()
+  const {
+    data,
+    isLoading,
+  } = useWorkflowInit()
 
   const nodesData = useMemo(() => {
     if (data)
@@ -186,7 +188,7 @@ const WorkflowWrap = memo(() => {
     return []
   }, [data])
 
-  if (!data) {
+  if (!data || isLoading) {
     return (
       <div className='flex justify-center items-center relative w-full h-full bg-[#F0F2F7]'>
         <Loading />