[Feature][UI Next]Added loading state to all tables (#9215)

* Added loading state to all tables * Delete useless variables
3 years ago · aea0025035
53 changed files with 231 additions and 66 deletions
--- 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>
    )
--- 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}
--- 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
      }),
      {}
    )
--- 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}
--- 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
      }),
      {}
    )
--- 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
--- 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>
--- 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 }
 }
--- 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 }
 }
--- 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}
--- 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
      }),
      {}
    )
--- 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}
--- 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
      }),
      {}
    )
--- 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
--- 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>
--- 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 }
 }
--- 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 }
 }
--- 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
      }),
      {}
    )
--- 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}
--- 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}
--- 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
        }
      ),
      {}
--- 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}
--- 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
        }
      ),
      {}
--- 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
    })
  }

--- 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
--- 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}
--- 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
--- 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
    })
  }

--- 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: [] }
    )
--- 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}
--- 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
      }
    )
  }
--- 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}
--- 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
      }
    )
  }
--- 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}
--- 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
    })
  }

--- 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
--- 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: [] }
    )
--- 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
--- 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: [] }
    )
--- 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}
--- 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
      }),
      {}
    )
--- 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}
--- 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
      }),
      {}
    )
--- 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}
--- 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
      }),
      {}
    )
--- 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'
--- 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
  }
--- 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}
--- 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
      }),
      {}
    )
--- 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}
--- 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
      }),
      {}
    )
--- 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}
--- 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
      }),
      {}
    )