Merge pull request #5189 from nocodb/fix/5158-show-loader-and-disable-btn

fix: Disable button to avoid duplicate api call when creating column, project and table

packages/nc-gui/components/dlg/TableCreate.vue

@@ -1,5 +1,16 @@
 <script setup lang="ts">
-import { Form, computed, nextTick, onMounted, ref, useProject, useTable, useTabs, useVModel, validateTableName } from '#imports'
+import {
+  Form,
+  computed,
+  nextTick,
+  onMounted,
+  ref,
+  useProject,
+  useTable,
+  useTabs,
+  useVModel,
+  validateTableName,
+} from '#imports'
 import { TabType } from '~/lib'
 
 const props = defineProps<{
@@ -78,14 +89,19 @@ const systemColumnsCheckboxInfo = SYSTEM_COLUMNS.map((c, index) => ({
   disabled: index === 0,
 }))
 
+const creating = ref(false)
+
 const _createTable = async () => {
   try {
+    creating.value = true
     await validate()
+    await createTable()
   } catch (e: any) {
     e.errorFields.map((f: Record<string, any>) => message.error(f.errors.join(',')))
     if (e.errorFields.length) return
+  } finally {
+    creating.value = false
   }
-  await createTable()
 }
 
 onMounted(() => {
@@ -109,7 +125,10 @@ onMounted(() => {
     <template #footer>
       <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 
-      <a-button key="submit" size="large" type="primary" @click="_createTable">{{ $t('general.submit') }}</a-button>
+      <a-button key="submit" size="large" type="primary" :loading="creating" @click="_createTable">{{
+          $t('general.submit')
+        }}
+      </a-button>
     </template>
 
     <div class="pl-10 pr-10 pt-5">
@@ -145,7 +164,8 @@ onMounted(() => {
           <div v-if="!project.prefix" class="mb-2">{{ $t('msg.info.tableNameInDb') }}</div>
 
           <a-form-item v-if="!project.prefix" v-bind="validateInfos.table_name">
-            <a-input v-model:value="table.table_name" size="large" hide-details :placeholder="$t('msg.info.tableNameInDb')" />
+            <a-input v-model:value="table.table_name" size="large" hide-details
+                     :placeholder="$t('msg.info.tableNameInDb')" />
           </a-form-item>
 
           <div>

packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@@ -80,8 +80,12 @@ const reloadMetaAndData = async () => {
   }
 }
 
+const saving = ref(false)
+
 async function onSubmit() {
+  saving.value = true
   const saved = await addOrUpdate(reloadMetaAndData, props.columnPosition)
+  saving.value = false
 
   if (!saved) return
 
@@ -234,7 +238,7 @@ useEventListener('keydown', (e: KeyboardEvent) => {
             {{ $t('general.cancel') }}
           </a-button>
 
-          <a-button html-type="submit" type="primary" @click.prevent="onSubmit">
+          <a-button html-type="submit" type="primary" :loading="saving" @click.prevent="onSubmit">
             <!-- Save -->
             {{ $t('general.save') }}
           </a-button>

packages/nc-gui/pages/index/index/create.vue

@@ -37,9 +37,13 @@ const formState = reactive({
   title: '',
 })
 
+const creating = ref(false)
+
 const createProject = async () => {
   $e('a:project:create:xcdb')
   try {
+    creating.value = true
+
     const result = await api.project.create({
       title: formState.title,
     })
@@ -47,6 +51,8 @@ const createProject = async () => {
     await navigateTo(`/nc/${result.id}`)
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    creating.value = false
   }
 }
 
@@ -90,7 +96,8 @@ onMounted(async () => {
       </a-form-item>
 
       <div class="text-center">
-        <button class="scaling-btn bg-opacity-100" type="submit">
+        <a-spin v-if="creating" spinning />
+        <button v-else class="scaling-btn bg-opacity-100" type="submit">
           <span class="flex items-center gap-2">
             <MaterialSymbolsRocketLaunchOutline />
             {{ $t('general.create') }}