diff --git a/dolphinscheduler-ui-next/src/views/data-quality/rule/components/rule-modal.tsx b/dolphinscheduler-ui-next/src/views/data-quality/rule/components/rule-modal.tsx
index 9afffc1886235ec0fb1cf1f1dc1c60d8d4f8eb0d..3cc5504e2a63b3e08484d286d7f8eb9f3d803434 100644
--- a/dolphinscheduler-ui-next/src/views/data-quality/rule/components/rule-modal.tsx
+++ b/dolphinscheduler-ui-next/src/views/data-quality/rule/components/rule-modal.tsx
@@ -19,7 +19,6 @@ import { defineComponent, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { NDataTable } from 'naive-ui'
 import Modal from '@/components/modal'
-import styles from '../index.module.scss'
 import { TableColumns } from 'naive-ui/es/data-table/src/interface'
 
 const props = {
@@ -94,7 +93,6 @@ export default defineComponent({
           data={this.ruleInputEntryList}
           striped
           size={'small'}
-          class={styles.table}
         />
       </Modal>
     )
diff --git a/dolphinscheduler-ui-next/src/views/data-quality/rule/index.tsx b/dolphinscheduler-ui-next/src/views/data-quality/rule/index.tsx
index 6620912675b89b96d7f51e9e70f8f719657a9ee0..fdeeb8a309f37b8133240f961e898eb8f0d778c0 100644
--- a/dolphinscheduler-ui-next/src/views/data-quality/rule/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/data-quality/rule/index.tsx
@@ -100,7 +100,8 @@ const TaskResult = defineComponent({
       onCancel,
       onConfirm,
       viewRuleEntry,
-      ruleEntryData
+      ruleEntryData,
+      loadingRef
     } = this
 
     const { columns } = useTable(viewRuleEntry)
@@ -127,7 +128,7 @@ const TaskResult = defineComponent({
           </NSpace>
         </NCard>
         <Card class={styles['table-card']}>
-          <NDataTable columns={columns} data={this.tableData} />
+          <NDataTable loading={loadingRef} columns={columns} data={this.tableData} />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}
diff --git a/dolphinscheduler-ui-next/src/views/data-quality/rule/use-table.ts b/dolphinscheduler-ui-next/src/views/data-quality/rule/use-table.ts
index a5e38a210e309068b3de11319e74735f3874b244..cb488ff64d5dc099a96c3eda7d7a4d23045f3dbc 100644
--- a/dolphinscheduler-ui-next/src/views/data-quality/rule/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/data-quality/rule/use-table.ts
@@ -35,7 +35,8 @@ export function useTable(viewRuleEntry = (unusedRuleJson: string): void => {}) {
     pageSize: ref(10),
     state: ref(null),
     searchVal: ref(null),
-    totalPage: ref(1)
+    totalPage: ref(1),
+    loadingRef: ref(false)
   })
 
   const columns: TableColumns<any> = [
@@ -97,6 +98,8 @@ export function useTable(viewRuleEntry = (unusedRuleJson: string): void => {}) {
   ]
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const data = {
       pageSize: params.pageSize,
       pageNo: params.pageNo,
@@ -129,12 +132,15 @@ export function useTable(viewRuleEntry = (unusedRuleJson: string): void => {}) {
             'yyyy-MM-dd HH:mm:ss'
           )
 
+          
           return {
             ...item,
             ruleName: ruleNameLocale,
             ruleTypeName: ruleTypeName
           }
         }) as any
+
+        variables.loadingRef = false
       }),
       {}
     )
diff --git a/dolphinscheduler-ui-next/src/views/data-quality/task-result/index.tsx b/dolphinscheduler-ui-next/src/views/data-quality/task-result/index.tsx
index 2298064520d5e66c41761ff042de82f981d94a7c..eb43a950ce2a008785293772c1dd0df67ea91be4 100644
--- a/dolphinscheduler-ui-next/src/views/data-quality/task-result/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/data-quality/task-result/index.tsx
@@ -77,7 +77,7 @@ const TaskResult = defineComponent({
     }
   },
   render() {
-    const { t, requestTableData, onUpdatePageSize, onSearch } = this
+    const { t, requestTableData, onUpdatePageSize, onSearch, loadingRef } = this
 
     return (
       <>
@@ -156,6 +156,7 @@ const TaskResult = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             scrollX={this.tableWidth}
diff --git a/dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts b/dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts
index ae6dc973ba45ca55c43dca9cfaf7a96856a0abee..50991c750173083cc23d652b06bd96ca0bc2baf5 100644
--- a/dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts
@@ -44,7 +44,8 @@ export function useTable() {
     state: ref(null),
     searchVal: ref(null),
     datePickerRange: ref(null),
-    totalPage: ref(1)
+    totalPage: ref(1),
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -191,6 +192,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const data = {
       pageSize: params.pageSize,
       pageNo: params.pageNo,
@@ -212,6 +215,8 @@ export function useTable() {
             ...item
           }
         }) as any
+
+        variables.loadingRef = false
       }),
       {}
     )
diff --git a/dolphinscheduler-ui-next/src/views/home/components/state-card.tsx b/dolphinscheduler-ui-next/src/views/home/components/state-card.tsx
index 87a902e00ceb3c3ebaead00da012fda004e54bea..d3dda37d2c5c7d131f719ad96dc278c4d33a8e1d 100644
--- a/dolphinscheduler-ui-next/src/views/home/components/state-card.tsx
+++ b/dolphinscheduler-ui-next/src/views/home/components/state-card.tsx
@@ -36,6 +36,10 @@ const props = {
   chartData: {
     type: Array as PropType<Array<StateChartData>>,
     default: () => []
+  },
+  loadingRef: {
+    type: Boolean as PropType<boolean>,
+    default: false
   }
 }
 
@@ -51,9 +55,8 @@ const StateCard = defineComponent({
     return { onUpdateDatePickerValue }
   },
   render() {
-    const { title, date, tableData, chartData, onUpdateDatePickerValue } = this
+    const { title, date, tableData, chartData, onUpdateDatePickerValue, loadingRef } = this
     const { columnsRef } = useTable()
-
     return (
       <Card title={title}>
         {{
@@ -63,6 +66,7 @@ const StateCard = defineComponent({
               <NGi>
                 {tableData && (
                   <NDataTable
+                    loading={loadingRef}
                     columns={columnsRef}
                     data={tableData}
                     striped
diff --git a/dolphinscheduler-ui-next/src/views/home/index.tsx b/dolphinscheduler-ui-next/src/views/home/index.tsx
index 4395daaa9068d533f7ad5daecaae413664949193..4287905eebef718b8d275bd131429ed4a3bea020 100644
--- a/dolphinscheduler-ui-next/src/views/home/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/home/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, ref, watch } from 'vue'
+import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'
 import { NGrid, NGi } from 'naive-ui'
 import { startOfToday, getTime } from 'date-fns'
 import { useI18n } from 'vue-i18n'
@@ -31,8 +31,8 @@ export default defineComponent({
     const dateRef = ref([getTime(startOfToday()), Date.now()])
     const taskStateRef = ref()
     const processStateRef = ref()
-    const { getTaskState } = useTaskState()
-    const { getProcessState } = useProcessState()
+    const { getTaskState, taskVariables } = useTaskState()
+    const { getProcessState, processVariables } = useProcessState()
 
     const initData = () => {
       taskStateRef.value = getTaskState(dateRef.value)
@@ -62,11 +62,13 @@ export default defineComponent({
       handleTaskDate,
       handleProcessDate,
       taskStateRef,
-      processStateRef
+      processStateRef,
+      ...toRefs(taskVariables),
+      ...toRefs(processVariables),
     }
   },
   render() {
-    const { t, dateRef, handleTaskDate, handleProcessDate } = this
+    const { t, dateRef, handleTaskDate, handleProcessDate, taskLoadingRef, processLoadingRef } = this
 
     return (
       <div>
@@ -78,6 +80,7 @@ export default defineComponent({
               tableData={this.taskStateRef?.value.table}
               chartData={this.taskStateRef?.value.chart}
               onUpdateDatePickerValue={handleTaskDate}
+              loadingRef={taskLoadingRef}
             />
           </NGi>
           <NGi>
@@ -87,6 +90,7 @@ export default defineComponent({
               tableData={this.processStateRef?.value.table}
               chartData={this.processStateRef?.value.chart}
               onUpdateDatePickerValue={handleProcessDate}
+              loadingRef={processLoadingRef}
             />
           </NGi>
         </NGrid>
diff --git a/dolphinscheduler-ui-next/src/views/home/use-process-state.ts b/dolphinscheduler-ui-next/src/views/home/use-process-state.ts
index 2e367bfcc2c208895fdb8d7ef948eaf3a79c98ab..18c287e07bf366e5f30b9ad339be00471ec1b1d1 100644
--- a/dolphinscheduler-ui-next/src/views/home/use-process-state.ts
+++ b/dolphinscheduler-ui-next/src/views/home/use-process-state.ts
@@ -22,11 +22,17 @@ import { toLower } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
 import type { StateData } from './types'
+import { reactive, ref } from 'vue'
 
 export function useProcessState() {
   const { t } = useI18n()
+  const processVariables = reactive({
+    processLoadingRef: ref(false)
+  })
 
   const getProcessState = (date: Array<number>) => {
+    if (processVariables.processLoadingRef) return
+    processVariables.processLoadingRef = true
     const { state } = useAsyncState(
       countProcessInstanceState({
         startDate: !date ? '' : format(date[0], 'yyyy-MM-dd HH:mm:ss'),
@@ -46,14 +52,15 @@ export function useProcessState() {
             name: t('home.' + toLower(item.taskStateType))
           }
         })
-
+        
+        processVariables.processLoadingRef = false
         return { table, chart }
       }),
       { table: [], chart: [] }
-    )
+      )
 
     return state
   }
 
-  return { getProcessState }
+  return { getProcessState, processVariables }
 }
diff --git a/dolphinscheduler-ui-next/src/views/home/use-task-state.ts b/dolphinscheduler-ui-next/src/views/home/use-task-state.ts
index f91a1b70aefbc744a6605a2e8f86e7245aad5e52..ffc58258687c58af446299d7049ed7d874a07e78 100644
--- a/dolphinscheduler-ui-next/src/views/home/use-task-state.ts
+++ b/dolphinscheduler-ui-next/src/views/home/use-task-state.ts
@@ -22,11 +22,17 @@ import { useI18n } from 'vue-i18n'
 import { countTaskState } from '@/service/modules/projects-analysis'
 import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
 import type { StateData } from './types'
+import { reactive, ref } from 'vue'
 
 export function useTaskState() {
   const { t } = useI18n()
+  const taskVariables = reactive({
+    taskLoadingRef: ref(false)
+  })
 
   const getTaskState = (date: Array<any>) => {
+    if (taskVariables.taskLoadingRef) return
+    taskVariables.taskLoadingRef = true
     const { state } = useAsyncState(
       countTaskState({
         startDate: !date ? '' : format(date[0], 'yyyy-MM-dd HH:mm:ss'),
@@ -46,6 +52,7 @@ export function useTaskState() {
             name: t('home.' + toLower(item.taskStateType))
           }
         })
+        taskVariables.taskLoadingRef = false
 
         return { table, chart }
       }),
@@ -55,5 +62,5 @@ export function useTaskState() {
     return state
   }
 
-  return { getTaskState }
+  return { getTaskState, taskVariables }
 }
diff --git a/dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/index.tsx b/dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/index.tsx
index b5d64ab07752a1435dfc12399a626cef1761befb..07a996c02cda206a8db97d0de49a3bb9f587ff45 100644
--- a/dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/index.tsx
@@ -77,7 +77,7 @@ const AuditLog = defineComponent({
     }
   },
   render() {
-    const { t, requestTableData, onUpdatePageSize, onSearch } = this
+    const { t, requestTableData, onUpdatePageSize, onSearch, loadingRef } = this
 
     return (
       <>
@@ -139,7 +139,7 @@ const AuditLog = defineComponent({
           </NSpace>
         </NCard>
         <Card class={styles['table-card']}>
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable loading={loadingRef} columns={this.columns} data={this.tableData} />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}
diff --git a/dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/use-table.ts b/dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/use-table.ts
index 7b5260befd1134928a11ad0e1baea2dcaee333c8..a1871e2b3a8c2f2c52560f18312b612c316e7057 100644
--- a/dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/use-table.ts
@@ -35,7 +35,8 @@ export function useTable() {
     operationType: ref(null),
     userName: ref(null),
     datePickerRange: ref(null),
-    totalPage: ref(1)
+    totalPage: ref(1),
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -69,6 +70,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const data = {
       pageSize: params.pageSize,
       pageNo: params.pageNo,
@@ -90,6 +93,7 @@ export function useTable() {
             ...item
           }
         }) as any
+        variables.loadingRef = false
       }),
       {}
     )
diff --git a/dolphinscheduler-ui-next/src/views/projects/list/index.tsx b/dolphinscheduler-ui-next/src/views/projects/list/index.tsx
index 2d901d62925298ed3d399222d8c54891cd22174d..4029049ec4a603a7b7b4dec243e93366e664aa8b 100644
--- a/dolphinscheduler-ui-next/src/views/projects/list/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/list/index.tsx
@@ -91,7 +91,7 @@ const list = defineComponent({
     }
   },
   render() {
-    const { t } = this
+    const { t, loadingRef } = this
     return (
       <div>
         <NCard>
@@ -124,6 +124,7 @@ const list = defineComponent({
           class={styles['table-card']}
         >
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             scrollX={this.tableWidth}
diff --git a/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
index c708c6d3aa9b235c940723d310ad5e928d65f20a..4ee5727b0476198b182df1b7e2a2a212ee945eb2 100644
--- a/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
@@ -218,10 +218,13 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryProjectListPaging(params).then((res: ProjectRes) => {
         variables.totalPage = res.totalPage
@@ -238,6 +241,7 @@ export function useTable() {
             ...item
           }
         }) as any
+        variables.loadingRef = false
       }),
       {}
     )
diff --git a/dolphinscheduler-ui-next/src/views/projects/overview/components/state-card.tsx b/dolphinscheduler-ui-next/src/views/projects/overview/components/state-card.tsx
index 87a902e00ceb3c3ebaead00da012fda004e54bea..d3dda37d2c5c7d131f719ad96dc278c4d33a8e1d 100644
--- a/dolphinscheduler-ui-next/src/views/projects/overview/components/state-card.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/overview/components/state-card.tsx
@@ -36,6 +36,10 @@ const props = {
   chartData: {
     type: Array as PropType<Array<StateChartData>>,
     default: () => []
+  },
+  loadingRef: {
+    type: Boolean as PropType<boolean>,
+    default: false
   }
 }
 
@@ -51,9 +55,8 @@ const StateCard = defineComponent({
     return { onUpdateDatePickerValue }
   },
   render() {
-    const { title, date, tableData, chartData, onUpdateDatePickerValue } = this
+    const { title, date, tableData, chartData, onUpdateDatePickerValue, loadingRef } = this
     const { columnsRef } = useTable()
-
     return (
       <Card title={title}>
         {{
@@ -63,6 +66,7 @@ const StateCard = defineComponent({
               <NGi>
                 {tableData && (
                   <NDataTable
+                    loading={loadingRef}
                     columns={columnsRef}
                     data={tableData}
                     striped
diff --git a/dolphinscheduler-ui-next/src/views/projects/overview/index.tsx b/dolphinscheduler-ui-next/src/views/projects/overview/index.tsx
index 9cbfaf4ec26bc5ffa5d5a80e0383d3e836a8816f..f71aed44e48dab42ff0ad87f6d2f237a66190f71 100644
--- a/dolphinscheduler-ui-next/src/views/projects/overview/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/overview/index.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, ref, watch } from 'vue'
+import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'
 import { NGrid, NGi } from 'naive-ui'
 import { startOfToday, getTime } from 'date-fns'
 import { useI18n } from 'vue-i18n'
@@ -31,8 +31,8 @@ const workflowMonitor = defineComponent({
     const dateRef = ref([getTime(startOfToday()), Date.now()])
     const taskStateRef = ref()
     const processStateRef = ref()
-    const { getTaskState } = useTaskState()
-    const { getProcessState } = useProcessState()
+    const { getTaskState, taskVariables } = useTaskState()
+    const { getProcessState, processVariables } = useProcessState()
 
     const handleTaskDate = (val: any) => {
       taskStateRef.value = getTaskState(val)
@@ -62,11 +62,13 @@ const workflowMonitor = defineComponent({
       handleTaskDate,
       handleProcessDate,
       taskStateRef,
-      processStateRef
+      processStateRef,
+      ...toRefs(taskVariables),
+      ...toRefs(processVariables),
     }
   },
   render() {
-    const { t, dateRef, handleTaskDate, handleProcessDate } = this
+    const { t, dateRef, handleTaskDate, handleProcessDate, taskLoadingRef, processLoadingRef  } = this
 
     return (
       <div>
@@ -78,6 +80,7 @@ const workflowMonitor = defineComponent({
               tableData={this.taskStateRef?.value.table}
               chartData={this.taskStateRef?.value.chart}
               onUpdateDatePickerValue={handleTaskDate}
+              loadingRef={taskLoadingRef}
             />
           </NGi>
           <NGi>
@@ -87,6 +90,7 @@ const workflowMonitor = defineComponent({
               tableData={this.processStateRef?.value.table}
               chartData={this.processStateRef?.value.chart}
               onUpdateDatePickerValue={handleProcessDate}
+              loadingRef={processLoadingRef}
             />
           </NGi>
         </NGrid>
diff --git a/dolphinscheduler-ui-next/src/views/projects/overview/use-process-state.ts b/dolphinscheduler-ui-next/src/views/projects/overview/use-process-state.ts
index b4d7f9e082c89014015144fdb615e0314e759f57..dbadba7cba84365f6a3e4a9ade5cbc90ebf64b88 100644
--- a/dolphinscheduler-ui-next/src/views/projects/overview/use-process-state.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/overview/use-process-state.ts
@@ -23,12 +23,18 @@ import { toLower } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
 import type { StateData } from './types'
+import { reactive, ref } from 'vue'
 
 export function useProcessState() {
   const route = useRoute()
   const { t } = useI18n()
+  const processVariables = reactive({
+    processLoadingRef: ref(false)
+  })
 
   const getProcessState = (date: Array<number>) => {
+    if (processVariables.processLoadingRef) return
+    processVariables.processLoadingRef = true
     const { state } = useAsyncState(
       countProcessInstanceState({
         startDate: !date ? '' : format(date[0], 'yyyy-MM-dd HH:mm:ss'),
@@ -48,6 +54,7 @@ export function useProcessState() {
             name: t('home.' + toLower(item.taskStateType))
           }
         })
+        processVariables.processLoadingRef = false
 
         return { table, chart }
       }),
@@ -57,5 +64,5 @@ export function useProcessState() {
     return state
   }
 
-  return { getProcessState }
+  return { getProcessState, processVariables }
 }
diff --git a/dolphinscheduler-ui-next/src/views/projects/overview/use-task-state.ts b/dolphinscheduler-ui-next/src/views/projects/overview/use-task-state.ts
index 0bee982874c1e9b596e62b01145b06ef18cfe1a3..5bc99a91c072c014dc9702aa07ec509765ebffc0 100644
--- a/dolphinscheduler-ui-next/src/views/projects/overview/use-task-state.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/overview/use-task-state.ts
@@ -23,12 +23,18 @@ import { useI18n } from 'vue-i18n'
 import { countTaskState } from '@/service/modules/projects-analysis'
 import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
 import type { StateData } from './types'
+import { reactive, ref } from 'vue'
 
 export function useTaskState() {
   const route = useRoute()
   const { t } = useI18n()
+  const taskVariables = reactive({
+    taskLoadingRef: ref(false)
+  })
 
   const getTaskState = (date: Array<number>) => {
+    if (taskVariables.taskLoadingRef) return
+    taskVariables.taskLoadingRef = true
     const { state } = useAsyncState(
       countTaskState({
         startDate: !date ? '' : format(date[0], 'yyyy-MM-dd HH:mm:ss'),
@@ -48,6 +54,7 @@ export function useTaskState() {
             name: t('home.' + toLower(item.taskStateType))
           }
         })
+        taskVariables.taskLoadingRef = false
 
         return { table, chart }
       }),
@@ -57,5 +64,5 @@ export function useTaskState() {
     return state
   }
 
-  return { getTaskState }
+  return { getTaskState, taskVariables }
 }
diff --git a/dolphinscheduler-ui-next/src/views/projects/task/definition/components/use-version.ts b/dolphinscheduler-ui-next/src/views/projects/task/definition/components/use-version.ts
index 109aeb141a23d11dcfb9cf282e64acd76581410f..924dca6864b35d8991d422cc392a5f4d1cc0d4e7 100644
--- a/dolphinscheduler-ui-next/src/views/projects/task/definition/components/use-version.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/components/use-version.ts
@@ -158,7 +158,8 @@ export function useVersion() {
     taskVersion: ref(null),
     taskCode: ref(null),
     refreshTaskDefinition: ref(false),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const handleSwitchVersion = (row: TaskDefinitionVersionItem) => {
@@ -182,6 +183,8 @@ export function useVersion() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryTaskVersions(
         { ...params },
@@ -194,6 +197,7 @@ export function useVersion() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )
diff --git a/dolphinscheduler-ui-next/src/views/projects/task/definition/components/version-modal.tsx b/dolphinscheduler-ui-next/src/views/projects/task/definition/components/version-modal.tsx
index 289755a62e23dafe6bb4cc4b7d15be555805d83f..3fd657fe2f6e1bebb9280a4ece6a1bcf41c1dc93 100644
--- a/dolphinscheduler-ui-next/src/views/projects/task/definition/components/version-modal.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/components/version-modal.tsx
@@ -77,7 +77,7 @@ const VersionModal = defineComponent({
     return { t, ...toRefs(variables), requestData, onConfirm }
   },
   render() {
-    const { t, requestData, onConfirm, show } = this
+    const { t, requestData, onConfirm, show, loadingRef } = this
 
     return (
       <Modal
@@ -86,7 +86,7 @@ const VersionModal = defineComponent({
         cancelShow={false}
         onConfirm={onConfirm}
       >
-        <NDataTable columns={this.columns} data={this.tableData} />
+        <NDataTable loading={loadingRef} columns={this.columns} data={this.tableData} />
         <div class={styles.pagination}>
           <NPagination
             v-model:page={this.page}
diff --git a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
index bf59455aaf8650199a6e2d1019f446ffcda07b4b..9e573d188a8bef3df3c9f1e315bb3114ac27e4a7 100644
--- a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
@@ -114,7 +114,7 @@ const TaskDefinition = defineComponent({
     }
   },
   render() {
-    const { t, onSearch, requestData, onUpdatePageSize, onRefresh, onCreate } =
+    const { t, onSearch, requestData, onUpdatePageSize, onRefresh, onCreate, loadingRef } =
       this
 
     return (
@@ -163,6 +163,7 @@ const TaskDefinition = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             scrollX={this.tableWidth}
diff --git a/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
index 871496fc8800d6dfca2703ed2795af68c3ddf322..3fbb755a8ee9e4b060cafc72f3d618e94d6a1c34 100644
--- a/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
@@ -266,7 +266,8 @@ export function useTable(onEdit: Function) {
     taskType: ref(null),
     showVersionModalRef: ref(false),
     showMoveModalRef: ref(false),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const handleDelete = (row: any) => {
@@ -285,6 +286,8 @@ export function useTable(onEdit: Function) {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryTaskDefinitionListPaging({ ...params }, { projectCode }).then(
         (res: TaskDefinitionRes) => {
@@ -302,6 +305,7 @@ export function useTable(onEdit: Function) {
             }
           }) as any
           variables.totalPage = res.totalPage
+          variables.loadingRef = false
         }
       ),
       {}
diff --git a/dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx b/dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx
index b8f5fa732f59fe42e8ce23f7c95199dee225efb1..382d0b23015bb3bf578ec3051a36fddc6efa6455 100644
--- a/dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx
@@ -86,7 +86,7 @@ const TaskInstance = defineComponent({
     }
   },
   render() {
-    const { t, requestTableData, onUpdatePageSize, onSearch, onConfirmModal } =
+    const { t, requestTableData, onUpdatePageSize, onSearch, onConfirmModal, loadingRef } =
       this
 
     return (
@@ -183,6 +183,7 @@ const TaskInstance = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             scrollX={this.tableWidth}
diff --git a/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
index 26f58bda62d138895800c1559f90f2612a0e25c4..88e9cb15b1d1b9a43a47cdea9daeb6360720899c 100644
--- a/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
@@ -62,7 +62,8 @@ export function useTable() {
     processInstanceName: ref(null),
     totalPage: ref(1),
     showModalRef: ref(false),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -268,6 +269,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const data = {
       pageSize: params.pageSize,
       pageNo: params.pageNo,
@@ -306,6 +309,7 @@ export function useTable() {
             }
           }) as any
           variables.totalPage = res.totalPage
+          variables.loadingRef = false
         }
       ),
       {}
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/use-table.ts
index 145188b2ff2f74b012ce7898faa6882d395758b6..c543ce426c5789e372b32d8bf7dc4ad70d3d3518 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/use-table.ts
@@ -152,10 +152,13 @@ export function useTable(
     page: ref(1),
     totalPage: ref(1),
     pageSize: ref(10),
-    projectCode: ref(Number(router.currentRoute.value.params.projectCode))
+    projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
+    loadingRef: ref(false)
   })
 
   const getTableData = (row: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     variables.row = row
     queryVersions(
       {
@@ -168,6 +171,7 @@ export function useTable(
       variables.tableData = res.totalList.map((item: any) => ({ ...item }))
 
       variables.totalPage = res.totalPage
+      variables.loadingRef = false
     })
   }
 
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/version-modal.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/version-modal.tsx
index 52d6192ea3e05c008413a7bac0e51b469eb2141e..3d761296c1d95a8799e7cf9172b88079917b70c9 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/version-modal.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/version-modal.tsx
@@ -80,7 +80,7 @@ export default defineComponent({
 
   render() {
     const { t } = useI18n()
-    const { requestData } = this
+    const { requestData, loadingRef } = this
 
     return (
       <Modal
@@ -90,6 +90,7 @@ export default defineComponent({
         onConfirm={this.hideModal}
       >
         <NDataTable
+          loading={loadingRef}
           columns={this.columns}
           data={this.tableData}
           striped
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx
index aef090b4e7bbbe52ecdcabd515494f6bf4a9eec2..4563b66fb355911e39f04b65eaa93a566e1cef29 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx
@@ -112,6 +112,7 @@ export default defineComponent({
   },
   render() {
     const { t } = useI18n()
+    const { loadingRef } = this
 
     return (
       <div class={styles.content}>
@@ -150,6 +151,7 @@ export default defineComponent({
         </Card>
         <Card title={t('project.workflow.workflow_definition')}>
           <NDataTable
+            loading={loadingRef}
             rowKey={(row) => row.code}
             columns={this.columns}
             data={this.tableData}
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx
index 4c5f15aeef5c41d3cc9edf7f432a320d50ae96ab..f2dc456e9d17cdae1d4dd260a81d2dfcad792a74 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx
@@ -73,6 +73,7 @@ export default defineComponent({
   render() {
     const { t } = useI18n()
     const router: Router = useRouter()
+    const { loadingRef } = this
 
     return (
       <div class={styles.content}>
@@ -87,6 +88,7 @@ export default defineComponent({
         </Card>
         <Card title={t('project.workflow.cron_manage')}>
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             striped
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
index 6ba3d7882becde3532f22836945c6bad3e7c8908..4a253c11f950ed9ff093b25f6ba4a235ff0a1287 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
@@ -55,7 +55,8 @@ export function useTable() {
     pageSize: ref(10),
     searchVal: ref(),
     totalPage: ref(1),
-    showRef: ref(false)
+    showRef: ref(false),
+    loadingRef: ref(false)
   })
 
   const renderTime = (time: string, timeZone: string) => {
@@ -243,6 +244,8 @@ export function useTable() {
   }
 
   const getTableData = (params: ISearchParam) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const definitionCode = Number(
       router.currentRoute.value.params.definitionCode
     )
@@ -254,6 +257,7 @@ export function useTable() {
       variables.tableData = res.totalList.map((item: any) => {
         return { ...item }
       })
+      variables.loadingRef = false
     })
   }
 
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts
index 71c6d80de75be4f8bee9476a6af063d670da19f8..375a29566565346c8a67633d7309c2d6693001da 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts
@@ -60,7 +60,8 @@ export function useTable() {
     startShowRef: ref(false),
     timingShowRef: ref(false),
     versionShowRef: ref(false),
-    copyShowRef: ref(false)
+    copyShowRef: ref(false),
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -337,12 +338,15 @@ export function useTable() {
   }
 
   const getTableData = (params: IDefinitionParam) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryListPaging({ ...params }, variables.projectCode).then((res: any) => {
         variables.totalPage = res.totalPage
         variables.tableData = res.totalList.map((item: any) => {
           return { ...item }
         })
+        variables.loadingRef = false
       }),
       { total: 0, table: [] }
     )
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx
index bf07245ef72c15ecbf582824c1265cbeb5df9735..1f4c73b3587b4ddc09bee820f0e7ea763c958e8e 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx
@@ -89,6 +89,7 @@ export default defineComponent({
   },
   render() {
     const { t } = useI18n()
+    const { loadingRef } = this
 
     return (
       <div class={styles.content}>
@@ -99,6 +100,7 @@ export default defineComponent({
         </Card>
         <Card title={t('project.workflow.workflow_instance')}>
           <NDataTable
+            loading={loadingRef}
             rowKey={(row) => row.id}
             columns={this.columns}
             data={this.tableData}
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts
index 9335b68ec88344e68174ae02cd1bd399a3b2ae52..6a212a0128bcb704f6c7be75678985caae0a8f3f 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts
@@ -61,7 +61,8 @@ export function useTable() {
     stateType: ref(),
     startDate: ref(),
     endDate: ref(),
-    projectCode: ref(Number(router.currentRoute.value.params.projectCode))
+    projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -236,6 +237,8 @@ export function useTable() {
   }
 
   const getTableData = () => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const params = {
       pageNo: variables.page,
       pageSize: variables.pageSize,
@@ -252,6 +255,7 @@ export function useTable() {
         variables.tableData = res.totalList.map((item: any) => {
           return { ...item }
         })
+        variables.loadingRef = false
       }
     )
   }
diff --git a/dolphinscheduler-ui-next/src/views/resource/task-group/option/index.tsx b/dolphinscheduler-ui-next/src/views/resource/task-group/option/index.tsx
index 551d9c8a47f35bbf3c8a3a4c6182f596636908fd..f1bc052d6e05e8dc0c88c0d740735ed5340b7aae 100644
--- a/dolphinscheduler-ui-next/src/views/resource/task-group/option/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/task-group/option/index.tsx
@@ -136,7 +136,8 @@ const taskGroupOption = defineComponent({
       resetTableData,
       onUpdatePageSize,
       updateItem,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     const { columns } = useTable(updateItem, resetTableData)
@@ -176,6 +177,7 @@ const taskGroupOption = defineComponent({
         >
           <div>
             <NDataTable
+              loading={loadingRef}
               columns={columns}
               size={'small'}
               data={this.tableData}
diff --git a/dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts b/dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts
index 9357bbe7c7965366e1f8c3d7e094f667002cb728..93f63cad68489a36cfdf040e077a1a116e04da78 100644
--- a/dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts
@@ -118,10 +118,13 @@ export function useTable(
     page: ref(1),
     pageSize: ref(10),
     name: ref(null),
-    totalPage: ref(1)
+    totalPage: ref(1),
+    loadingRef: ref(false)
   })
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     Promise.all([queryTaskGroupListPaging(params), queryAllProjectList()]).then(
       (values: any[]) => {
         variables.totalPage = values[0].totalPage
@@ -149,6 +152,7 @@ export function useTable(
             }
           }
         )
+        variables.loadingRef = false
       }
     )
   }
diff --git a/dolphinscheduler-ui-next/src/views/resource/task-group/queue/index.tsx b/dolphinscheduler-ui-next/src/views/resource/task-group/queue/index.tsx
index 67ce2dca010f02f4a5af81d6a5d574daca41eb0e..89f669fb0181c92b231d18d74adbc237b1d1e360 100644
--- a/dolphinscheduler-ui-next/src/views/resource/task-group/queue/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/task-group/queue/index.tsx
@@ -150,7 +150,8 @@ const taskGroupQueue = defineComponent({
       onSearch,
       showModalRef,
       updateItemData,
-      taskGroupOptions
+      taskGroupOptions,
+      loadingRef
     } = this
 
     const { columns } = useTable(updatePriority, resetTableData)
@@ -192,6 +193,7 @@ const taskGroupQueue = defineComponent({
         >
           <div>
             <NDataTable
+              loading={loadingRef}
               columns={columns}
               size={'small'}
               data={this.tableData}
diff --git a/dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts b/dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts
index 7cfdc72fdba1a1964484ae3fa5651d5f6a42bb40..bd862742d3ba73cd36f25169e04dd60e9f22dc5a 100644
--- a/dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts
@@ -121,10 +121,13 @@ export function useTable(
     page: ref(1),
     pageSize: ref(10),
     groupId: ref(3),
-    totalPage: ref(1)
+    totalPage: ref(1),
+    loadingRef: ref(false)
   })
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const taskGroupSearchParams = {
       pageNo: 1,
       pageSize: 2147483647
@@ -159,6 +162,7 @@ export function useTable(
           }
         }
       )
+      variables.loadingRef = false
     })
   }
 
diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx b/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx
index 8739bab6affbe775618b9d1ab63bba569282158c..26018156516b8380619586dc1f5140bc461b5ea4 100644
--- a/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx
@@ -88,6 +88,7 @@ export default defineComponent({
   },
   render() {
     const { t } = useI18n()
+    const { loadingRef } = this
 
     return (
       <div class={styles.content}>
@@ -123,6 +124,7 @@ export default defineComponent({
         </Card>
         <Card title={t('resource.function.udf_function')}>
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             striped
diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts b/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts
index c1e38cfd1ab476bf95df0d4c08252aff31b82836..5dfa9003c9243b91ca953ad7e8223c80b3495f8f 100644
--- a/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts
@@ -48,7 +48,8 @@ export function useTable() {
     pageSize: ref(10),
     searchVal: ref(),
     totalPage: ref(1),
-    showRef: ref(false)
+    showRef: ref(false),
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -162,12 +163,15 @@ export function useTable() {
   }
 
   const getTableData = (params: IUdfFunctionParam) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryUdfFuncListPaging({ ...params }).then((res: any) => {
         variables.totalPage = res.totalPage
         variables.tableData = res.totalList.map((item: any) => {
           return { ...item }
         })
+        variables.loadingRef = false
       }),
       { total: 0, table: [] }
     )
diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx b/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx
index 2bcd409c86ca8865a7b78580e4ca72ff25382982..361d2275289c8dbc5db448e307bc89f1381d372b 100644
--- a/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx
@@ -109,6 +109,7 @@ export default defineComponent({
   },
   render() {
     const { t } = useI18n()
+    const { loadingRef } = this
 
     return (
       <div class={styles.content}>
@@ -155,6 +156,7 @@ export default defineComponent({
             default: () => (
               <div>
                 <NDataTable
+                  loading={loadingRef}
                   columns={this.columns}
                   data={this.tableData}
                   striped
diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts b/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts
index 1b5bac63495fedf8a88d51b4cb70a4d28d13adf9..916cf5e4e29a83963e9f364c644b010e52d0b8f9 100644
--- a/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts
@@ -66,7 +66,8 @@ export function useTable() {
     searchVal: ref(),
     totalPage: ref(1),
     folderShowRef: ref(false),
-    uploadShowRef: ref(false)
+    uploadShowRef: ref(false),
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -224,6 +225,8 @@ export function useTable() {
   }
 
   const getTableData = (params: IUdfResourceParam) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryResourceListPaging({ ...params, type: 'UDF' }).then((res: any) => {
         const breadList =
@@ -237,6 +240,7 @@ export function useTable() {
         variables.tableData = res.totalList.map((item: any) => {
           return { ...item }
         })
+        variables.loadingRef = false
       }),
       { total: 0, table: [] }
     )
diff --git a/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.tsx
index c57d10b52c13dee550484b8cad2a916ce7c69a91..975a4f6ded7e1c87276e07f160e0f8095a03e35e 100644
--- a/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.tsx
@@ -97,7 +97,8 @@ const alarmGroupManage = defineComponent({
       onCancelModal,
       onConfirmModal,
       handleModalChange,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     return (
@@ -129,7 +130,7 @@ const alarmGroupManage = defineComponent({
           </div>
         </NCard>
         <Card class={styles['table-card']}>
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable loading={loadingRef} columns={this.columns} data={this.tableData} />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}
diff --git a/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/use-table.ts
index 02944ac6cc653e50ff709674c505e1645e162a50..be5e7ede901aea44445beca7930330a5bd676564 100644
--- a/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/alarm-group-manage/use-table.ts
@@ -139,7 +139,8 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const handleDelete = (row: any) => {
@@ -156,6 +157,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryAlertGroupListPaging({ ...params }).then((res: AlarmGroupRes) => {
         variables.tableData = res.totalList.map((item, unused) => {
@@ -172,6 +175,7 @@ export function useTable() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )
diff --git a/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx
index 7fb2b8ae43e4ceec22904c30a50d488f23c5898a..9a82baf90466d110186ece58ec23a585985e9008 100644
--- a/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx
@@ -97,7 +97,8 @@ const environmentManage = defineComponent({
       onCancelModal,
       onConfirmModal,
       handleModalChange,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     return (
@@ -135,6 +136,7 @@ const environmentManage = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             row-class-name='items'
             columns={this.columns}
             data={this.tableData}
diff --git a/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts
index 908230ad5a9566c6acec66e46a4221ca0be774f9..115341e8ab4319dbc95e8ba1a7dc19bfa08e100e 100644
--- a/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts
@@ -181,7 +181,8 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const handleDelete = (row: any) => {
@@ -198,6 +199,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryEnvironmentListPaging({ ...params }).then((res: EnvironmentRes) => {
         variables.tableData = res.totalList.map((item, unused) => {
@@ -214,6 +217,7 @@ export function useTable() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )
diff --git a/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/index.tsx
index 9ccc2ad92ba0f95b30d3575c8bd334958f233c8d..baaff8ac99030e51081dd99f41f229e4953b3e24 100644
--- a/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/index.tsx
@@ -98,7 +98,8 @@ const k8sNamespaceManage = defineComponent({
       onCancelModal,
       onConfirmModal,
       handleModalChange,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     return (
@@ -131,6 +132,7 @@ const k8sNamespaceManage = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             scrollX={this.tableWidth}
diff --git a/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts
index 16c3e2eae2b0eeb5dfeee7047dbbbe31e3e9eeb9..4132d6b3b4754e795ea73fd7cf3c558df5c4271a 100644
--- a/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts
@@ -190,10 +190,13 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryNamespaceListPaging({ ...params }).then((res: NamespaceListRes) => {
         variables.tableData = res.totalList.map((item, unused) => {
@@ -210,6 +213,7 @@ export function useTable() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )
diff --git a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
index d8b5b2bd0c66eef4bc55ef6ed8c2c03ad3568b2d..e6410ca3afb2ff0b9847f5a9b95e6ec9c2174bdb 100644
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
@@ -91,7 +91,7 @@ const tenementManage = defineComponent({
     }
   },
   render() {
-    const { t } = this
+    const { t, loadingRef } = this
     return (
       <div class={styles.container}>
         <NCard>
@@ -124,6 +124,7 @@ const tenementManage = defineComponent({
           class={styles['table-card']}
         >
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             row-class-name='items'
diff --git a/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
index b6be067997a3457f1d4c95f94b80afc23c4a83d0..30b0f3e04f3599be144a2f717276fedb463d384c 100644
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
@@ -172,10 +172,13 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryTenantListPaging({ ...params }).then((res: any) => {
         variables.tableData = res.totalList.map((item: any, unused: number) => {
@@ -184,9 +187,10 @@ export function useTable() {
           }
         })
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
-    )
+      )
 
     return state
   }
diff --git a/dolphinscheduler-ui-next/src/views/security/token-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/token-manage/index.tsx
index 4f7bdd5ad45ef6152738b85fb14e7ffa6e945246..89a90b6c9535dc2d3c06cfffed9ea804d8216f8d 100644
--- a/dolphinscheduler-ui-next/src/views/security/token-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/token-manage/index.tsx
@@ -97,7 +97,8 @@ const tokenManage = defineComponent({
       onCancelModal,
       onConfirmModal,
       handleModalChange,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     return (
@@ -135,6 +136,7 @@ const tokenManage = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             row-class-name='items'
             columns={this.columns}
             data={this.tableData}
diff --git a/dolphinscheduler-ui-next/src/views/security/token-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/token-manage/use-table.ts
index 2a79f7f8bd4ea637a79992e86664affc3b46db43..ccc1a5c8b1fa9a83899428679eca49a09cab689d 100644
--- a/dolphinscheduler-ui-next/src/views/security/token-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/token-manage/use-table.ts
@@ -144,7 +144,8 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const handleDelete = (row: any) => {
@@ -161,6 +162,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryAccessTokenList({ ...params }).then((res: TokenRes) => {
         variables.tableData = res.totalList.map((item, unused) => {
@@ -181,6 +184,7 @@ export function useTable() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )
diff --git a/dolphinscheduler-ui-next/src/views/security/worker-group-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/worker-group-manage/index.tsx
index 4ad51f0ec9f9e450e36c1e703c4c4c5980397ea0..c9970947b24aa3431606bd69a78f01f5eccf657e 100644
--- a/dolphinscheduler-ui-next/src/views/security/worker-group-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/worker-group-manage/index.tsx
@@ -98,7 +98,8 @@ const workerGroupManage = defineComponent({
       onCancelModal,
       onConfirmModal,
       handleModalChange,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     return (
@@ -136,6 +137,7 @@ const workerGroupManage = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             row-class-name='items'
             columns={this.columns}
             data={this.tableData}
diff --git a/dolphinscheduler-ui-next/src/views/security/worker-group-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/worker-group-manage/use-table.ts
index 06c8fd4e7632e4dee51f1fe4dc1c9f0db3db4e39..796fc03c7c43268b51f651ace53cc09d8d43cc52 100644
--- a/dolphinscheduler-ui-next/src/views/security/worker-group-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/worker-group-manage/use-table.ts
@@ -160,7 +160,8 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const handleDelete = (row: any) => {
@@ -177,6 +178,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryAllWorkerGroupsPaging({ ...params }).then((res: WorkerGroupRes) => {
         variables.tableData = res.totalList.map((item, unused) => {
@@ -185,6 +188,7 @@ export function useTable() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )
diff --git a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.tsx b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.tsx
index 9b9456be1fb3bb84c198cc4070bc7225ded306d2..e8b6bb6145e370bdc85c1038e4879d1d14d32396 100644
--- a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.tsx
@@ -98,7 +98,8 @@ const yarnQueueManage = defineComponent({
       onCancelModal,
       onConfirmModal,
       handleModalChange,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     return (
@@ -136,6 +137,7 @@ const yarnQueueManage = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             row-class-name='items'
             columns={this.columns}
             data={this.tableData}
diff --git a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/use-table.ts b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/use-table.ts
index d801b471f0bdd462fb1e8eb84a0acb6e7d98291f..be5400020d5b4e2a10225d59e62c3a9ca8cfd572 100644
--- a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/use-table.ts
@@ -98,10 +98,13 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryQueueListPaging({ ...params }).then((res: QueueRes) => {
         variables.tableData = res.totalList.map((item, unused) => {
@@ -110,6 +113,7 @@ export function useTable() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )