fix: add loading while click to start chat in datasource management

Author: ulleo

frontend/src/views/ds/Card.vue

@@ -35,6 +35,8 @@ const emits = defineEmits([
   'dataTableDetail',
   'showTable',
   'recommendation',
+  'startChecking',
+  'endChecking',
 ])
 const icon = computed(() => {
   return (dsTypeWithImg.find((ele) => props.type === ele.type) || {}).img
@@ -53,11 +55,17 @@ const handleDel = () => {
 
 const handleQuestion = () => {
   //check first
-  datasourceApi.check_by_id(props.id).then((res: any) => {
-    if (res) {
-      emits('question', props.id)
-    }
-  })
+  emits('startChecking')
+  datasourceApi
+    .check_by_id(props.id)
+    .then((res: any) => {
+      if (res) {
+        emits('question', props.id)
+      }
+    })
+    .finally(() => {
+      emits('endChecking')
+    })
 }
 
 function runSQL() {

frontend/src/views/ds/Datasource.vue

@@ -198,14 +198,23 @@ const back = () => {
   currentDataTable.value = null
 }
 
+const loading = ref(false)
+
+function startLoading() {
+  loading.value = true
+}
+function endLoading() {
+  loading.value = false
+}
+
 useEmitt({
   name: 'ds-index-click',
   callback: back,
 })
 </script>
 
 <template>
-  <div v-show="!currentDataTable" class="datasource-config no-padding">
+  <div v-show="!currentDataTable" v-loading="loading" class="datasource-config no-padding">
     <div class="datasource-methods">
       <span class="title">{{ $t('ds.title') }}</span>
       <div class="button-input">
@@ -299,6 +308,8 @@ useEmitt({
             :type-name="ele.type_name"
             :num="ele.num"
             :description="ele.description"
+            @start-checking="startLoading"
+            @end-checking="endLoading"
             @question="handleQuestion"
             @edit="handleEditDatasource(ele)"
             @recommendation="handleRecommendation(ele)"