commit.

paimon-web-ui/src/store/job/index.ts

@@ -59,6 +59,9 @@ export const useJobStore = defineStore({
         return state.jobs[key].executionTime
       }
     },
+    getLoading(state): (key: string) => boolean {
+      return key => state.jobs[key].loading
+    },
     getColumns(state): (key: string) => number {
       return (key) => {
         const initResultData = state.jobs[key]?.job?.resultData
@@ -108,6 +111,11 @@ export const useJobStore = defineStore({
         this.jobs[key].job = currentJob
       }
     },
+    updateLoading(key: string, loading: boolean) {
+      if (this.jobs[key]) {
+        this.jobs[key].loading = loading
+      }
+    },
     updateJobResultData(key: string, jobResultData: JobResultData) {
       if (this.jobs[key]) {
         this.jobs[key].jobResultData = jobResultData
@@ -139,6 +147,7 @@ export const useJobStore = defineStore({
           executionTime: 0,
           startTime: 0,
           displayResult: false,
+          loading: false,
         }
       }
     },

paimon-web-ui/src/store/job/type.ts

@@ -28,4 +28,5 @@ export interface JobDetails {
   timerId?: number
   startTime: number
   displayResult: boolean
+  loading: boolean
 }

paimon-web-ui/src/views/playground/components/query/components/console/components/controls/index.tsx

@@ -58,6 +58,7 @@ export default defineComponent({
       if (currentJob.value) {
         if (currentJob.value.shouldFetchResult) {
           try {
+            jobStore.updateLoading(currentKey.value, true)
             const job = toRaw(currentJob.value)
             const { submitId, clusterId, sessionId, type: taskType, token } = job
             const resultFetchDTO = {
@@ -73,6 +74,9 @@ export default defineComponent({
           catch (error) {
             console.error('Error fetching result:', error)
           }
+          finally {
+            jobStore.updateLoading(currentKey.value, false)
+          }
         }
         else {
           message.warning(t('playground.no_data'))

paimon-web-ui/src/views/playground/components/query/components/console/components/table/index.tsx

@@ -42,6 +42,7 @@ export default defineComponent({
       const currentTab = tabData.value.panelsList.find((item: any) => item.key === tabData.value.chooseTab)
       return currentTab ? currentTab.key : null
     })
+    const loading = computed(() => jobStore.getLoading(currentKey.value))
     const scrollX = ref('100%')
     const tableContainer = ref<HTMLElement | null>(null)
     const tableRef = ref<DataTableInst | null>(null)
@@ -171,6 +172,7 @@ export default defineComponent({
       scrollX,
       maxHeight: props.maxHeight,
       maxTableHeight,
+      loading,
     }
   },
   render() {
@@ -182,6 +184,7 @@ export default defineComponent({
         <n-data-table
           ref={(el: any) => { this.tableRef = el }}
           class={styles.table}
+          loading={this.loading}
           columns={this.columns}
           data={this.data}
           max-height={`${this.maxTableHeight}px`}