feat: convert components to dynamic imports for improved performance

web/app/components/workflow/header/header-in-normal.tsx

@@ -50,8 +50,7 @@ const HeaderInNormal = ({
     setShowDebugAndPreviewPanel(false)
     setShowVariableInspectPanel(false)
     setShowChatVariablePanel(false)
-  }, [handleBackupDraft, workflowStore, handleNodeSelect, selectedNode,
-    setShowWorkflowVersionHistoryPanel, setShowEnvPanel, setShowDebugAndPreviewPanel, setShowVariableInspectPanel])
+  }, [workflowStore, handleBackupDraft, selectedNode, handleNodeSelect, setShowWorkflowVersionHistoryPanel, setShowEnvPanel, setShowDebugAndPreviewPanel, setShowVariableInspectPanel, setShowChatVariablePanel])
 
   return (
     <>

web/app/components/workflow/header/index.tsx

@@ -4,10 +4,17 @@ import {
 } from '../hooks'
 import type { HeaderInNormalProps } from './header-in-normal'
 import HeaderInNormal from './header-in-normal'
-import HeaderInHistory from './header-in-view-history'
 import type { HeaderInRestoringProps } from './header-in-restoring'
-import HeaderInRestoring from './header-in-restoring'
 import { useStore } from '../store'
+import dynamic from 'next/dynamic'
+
+const HeaderInHistory = dynamic(() => import('./header-in-view-history'), {
+  ssr: false,
+})
+const HeaderInRestoring = dynamic(() => import('./header-in-restoring'), {
+  ssr: false,
+})
+
 export type HeaderProps = {
   normal?: HeaderInNormalProps
   restoring?: HeaderInRestoringProps

web/app/components/workflow/index.tsx

@@ -79,10 +79,14 @@ import {
 } from './constants'
 import { WorkflowHistoryProvider } from './workflow-history-store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import Confirm from '@/app/components/base/confirm'
 import DatasetsDetailProvider from './datasets-detail-store/provider'
 import { HooksStoreContextProvider } from './hooks-store'
 import type { Shape as HooksStoreShape } from './hooks-store'
+import dynamic from 'next/dynamic'
+
+const Confirm = dynamic(() => import('@/app/components/base/confirm'), {
+  ssr: false,
+})
 
 const nodeTypes = {
   [CUSTOM_NODE]: CustomNode,