fix(gui): while creating column/project disable button to avoid duplicate api call

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -78,14 +78,18 @@ const systemColumnsCheckboxInfo = SYSTEM_COLUMNS.map((c, index) => ({
   disabled: index === 0,
 }))
 
+const creating = ref(false)
+
 const _createTable = async () => {
   try {
+    creating.value = true
     await validate()
   } catch (e: any) {
     e.errorFields.map((f: Record<string, any>) => message.error(f.errors.join(',')))
     if (e.errorFields.length) return
   }
   await createTable()
+  creating.value = false
 }
 
 onMounted(() => {
@@ -109,7 +113,9 @@ 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">

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,
     })
@@ -48,6 +52,7 @@ const createProject = async () => {
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
+  creating.value = false
 }
 
 const input: VNodeRef = ref<typeof Input>()
@@ -90,7 +95,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') }}