diff --git a/web/app/components/workflow-app/hooks/use-workflow-init.ts b/web/app/components/workflow-app/hooks/use-workflow-init.ts
index db9be7dfc2..05cd93ca25 100644
--- a/web/app/components/workflow-app/hooks/use-workflow-init.ts
+++ b/web/app/components/workflow-app/hooks/use-workflow-init.ts
@@ -56,6 +56,7 @@ export const useWorkflowInit = () => {
   } = useWorkflowConfig('/files/upload', handleUpdateWorkflowFileUploadConfig)
 
   const handleGetInitialWorkflowData = useCallback(async () => {
+    setIsLoading(true)
     try {
       const res = await fetchWorkflowDraft(`/apps/${appDetail.id}/workflows/draft`)
       setData(res)
@@ -116,6 +117,7 @@ export const useWorkflowInit = () => {
 
   useEffect(() => {
     handleGetInitialWorkflowData()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const handleFetchPreloadData = useCallback(async () => {
@@ -156,5 +158,6 @@ export const useWorkflowInit = () => {
     data,
     isLoading: isLoading || isFileUploadConfigLoading,
     fileUploadConfigResponse,
+    reload: handleGetInitialWorkflowData,
   }
 }
diff --git a/web/app/components/workflow-app/index.tsx b/web/app/components/workflow-app/index.tsx
index 318666131b..9005f2da24 100644
--- a/web/app/components/workflow-app/index.tsx
+++ b/web/app/components/workflow-app/index.tsx
@@ -40,16 +40,23 @@ import {
 import { createWorkflowSlice } from './store/workflow/workflow-slice'
 
 const WorkflowAppWithAdditionalContext = () => {
-  const [viewType, setViewType] = useState(ViewType.graph)
-
   const {
     data,
     isLoading,
     fileUploadConfigResponse,
+    reload,
   } = useWorkflowInit()
   const workflowStore = useWorkflowStore()
   const { isLoadingCurrentWorkspace, currentWorkspace } = useAppContext()
 
+  const [viewType, doSetViewType] = useState(ViewType.graph)
+  const setViewType = (type: ViewType) => {
+    doSetViewType(type)
+    if (type === ViewType.graph) {
+      reload()
+    }
+  }
+
   // Initialize trigger status at application level
   const { setTriggerStatuses } = useTriggerStatusStore()
   const appDetail = useAppStore(s => s.appDetail)
@@ -164,7 +171,21 @@ const WorkflowAppWithAdditionalContext = () => {
     })
   }, [replayRunId, workflowStore, getWorkflowRunAndTraceUrl])
 
-  if (!data || isLoading || isLoadingCurrentWorkspace || !currentWorkspace.id) {
+  const isDataReady = !(!data || isLoading || isLoadingCurrentWorkspace || !currentWorkspace.id)
+  const GraphMain = useMemo(() => {
+    if (!isDataReady)
+      return null
+
+    return (
+      <WorkflowAppMain
+        nodes={nodesData}
+        edges={edgesData}
+        viewport={data.graph.viewport}
+      />
+    )
+  }, [isDataReady, nodesData, edgesData, data])
+
+  if (!isDataReady) {
     return (
       <div className="relative flex h-full w-full items-center justify-center">
         <Loading />
@@ -213,11 +234,7 @@ const WorkflowAppWithAdditionalContext = () => {
         {viewType === ViewType.graph
           ? (
               <FeaturesProvider features={initialFeatures}>
-                <WorkflowAppMain
-                  nodes={nodesData}
-                  edges={edgesData}
-                  viewport={data.graph.viewport}
-                />
+                {GraphMain}
               </FeaturesProvider>
             )
           : (
diff --git a/web/service/workflow.ts b/web/service/workflow.ts
index 3a37db791b..aac83a0de0 100644
--- a/web/service/workflow.ts
+++ b/web/service/workflow.ts
@@ -19,6 +19,10 @@ export const syncWorkflowDraft = ({ url, params }: {
   url: string
   params: Pick<FetchWorkflowDraftResponse, 'graph' | 'features' | 'environment_variables' | 'conversation_variables'>
 }) => {
+  // when graph adn skill type changed, it would pass empty nodes array...Temp prevent sync in this case
+  if (params.graph.nodes.length === 0) {
+    throw new Error('Cannot sync workflow draft with zero nodes.')
+  }
   const sanitized = sanitizeWorkflowDraftPayload(params)
   return post<CommonResponse & { updated_at: number, hash: string }>(url, { body: sanitized }, { silent: true })
 }