feat: Introduce syncLoading state to manage UI during table synchronization, replacing creatingJob. (baserow#4743)

Author: jonadeline

web-frontend/modules/database/components/dataSync/SyncTableModal.vue

@@ -1,5 +1,9 @@
 <template>
-  <Modal ref="modal" :can-close="!jobIsRunning" @hidden="hidden">
+  <Modal
+    ref="modal"
+    :can-close="!syncLoading && !jobIsRunning"
+    @hidden="hidden"
+  >
     <template #content>
       <div class="import-modal__header">
         <h2 class="import-modal__title">
@@ -12,17 +16,17 @@
       <Error :error="error"></Error>
       <div class="modal-progress__actions margin-top-2">
         <ProgressBar
-          v-if="jobIsRunning || jobHasSucceeded"
-          :value="job.progress_percentage"
+          v-if="syncLoading || jobIsRunning || jobHasSucceeded"
+          :value="job?.progress_percentage || 0"
           :status="jobHumanReadableState"
         />
         <div class="align-right">
           <Button
             v-if="!jobHasSucceeded"
             type="primary"
             size="large"
-            :disabled="jobIsRunning"
-            :loading="jobIsRunning"
+            :disabled="syncLoading || jobIsRunning"
+            :loading="syncLoading || jobIsRunning"
             @click="syncTable(table)"
           >
             {{ $t('syncTableModal.sync') }}
@@ -49,11 +53,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      creatingJob: false,
-    }
-  },
   methods: {
     show() {
       this.job = null

web-frontend/modules/database/mixins/dataSync.js

@@ -12,6 +12,7 @@ export default {
       properties: null,
       syncedProperties: [],
       updateLoading: false,
+      syncLoading: false,
     }
   },
   beforeUnmount() {
@@ -106,6 +107,7 @@ export default {
 
       this.hideError()
       this.job = null
+      this.syncLoading = true
 
       try {
         const { data: job } = await DataSyncService(this.$client).syncTable(
@@ -114,6 +116,8 @@ export default {
         this.startJobPoller(job)
       } catch (error) {
         this.handleError(error)
+      } finally {
+        this.syncLoading = false
       }
     },
     async update(table, values, syncTable = true) {