diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
index 34605f519c0a..1152d93cf092 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/index.tsx
@@ -23,7 +23,8 @@ import {
   NPagination,
   NSpace,
   NTooltip,
-  NPopconfirm
+  NPopconfirm,
+  NSkeleton
 } from 'naive-ui'
 import {
   defineComponent,
@@ -42,6 +43,7 @@ import TimingModal from './components/timing-modal'
 import VersionModal from './components/version-modal'
 import CopyModal from './components/copy-modal'
 import type { Router } from 'vue-router'
+import type { IDefinitionData } from './types'
 import Search from '@/components/input-search'
 import DependenciesModal from '@/views/projects/components/dependencies/dependencies-modal'
 import totalCount from '@/utils/tableTotalCount'
@@ -144,6 +146,9 @@ export default defineComponent({
     const { t } = useI18n()
     const { loadingRef } = this
 
+    const showSkeleton =
+      loadingRef && (!this.tableData || this.tableData.length === 0)
+
     return (
       <NSpace vertical>
         <Card>
@@ -184,16 +189,24 @@ export default defineComponent({
         </Card>
         <Card title={t('project.workflow.workflow_definition')}>
           <NSpace vertical>
-            <NDataTable
-              loading={loadingRef}
-              rowKey={(row) => row.code}
-              columns={this.columns}
-              data={this.tableData}
-              striped
-              v-model:checked-row-keys={this.checkedRowKeys}
-              row-class-name='items'
-              scrollX={this.tableWidth}
-            />
+            {showSkeleton ? (
+              <NSkeleton
+                height='400px'
+                repeat={this.pageSize || 10}
+                sharp={false}
+              />
+            ) : (
+              <NDataTable
+                loading={false}
+                rowKey={(row: IDefinitionData) => row.code}
+                columns={this.columns}
+                data={this.tableData}
+                striped
+                v-model:checked-row-keys={this.checkedRowKeys}
+                row-class-name='items'
+                scrollX={this.tableWidth}
+              />
+            )}
             <NSpace justify='space-between'>
               <NSpace>
                 <NTooltip>