From f32512a3d7c43da8166373068a4471a4ee21db08 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 22 Feb 2023 18:52:50 +0530
Subject: [PATCH 1/2] 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            | 8 +++++++-
 .../nc-gui/components/smartsheet/column/EditOrAdd.vue     | 6 +++++-
 packages/nc-gui/pages/index/index/create.vue              | 8 +++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index 96cb6cec16..96718e9bba 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/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">
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 91004c235b..326acca7cc 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/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>
diff --git a/packages/nc-gui/pages/index/index/create.vue b/packages/nc-gui/pages/index/index/create.vue
index ff6c1ec374..8f65c439ba 100644
--- a/packages/nc-gui/pages/index/index/create.vue
+++ b/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') }}

From 06f03c5315487beefe12de0d720e9bf5a09f24e3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 23 Feb 2023 12:33:42 +0530
Subject: [PATCH 2/2] refactor(gui): reset value in finally block

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/dlg/TableCreate.vue     | 26 ++++++++++++++-----
 packages/nc-gui/pages/index/index/create.vue  |  3 ++-
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/dlg/TableCreate.vue b/packages/nc-gui/components/dlg/TableCreate.vue
index 96718e9bba..b3463181d1 100644
--- a/packages/nc-gui/components/dlg/TableCreate.vue
+++ b/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<{
@@ -84,12 +95,13 @@ 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()
-  creating.value = false
 }
 
 onMounted(() => {
@@ -114,8 +126,9 @@ onMounted(() => {
       <a-button key="back" size="large" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
 
       <a-button key="submit" size="large" type="primary" :loading="creating" @click="_createTable">{{
-        $t('general.submit')
-      }}</a-button>
+          $t('general.submit')
+        }}
+      </a-button>
     </template>
 
     <div class="pl-10 pr-10 pt-5">
@@ -151,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>
diff --git a/packages/nc-gui/pages/index/index/create.vue b/packages/nc-gui/pages/index/index/create.vue
index 8f65c439ba..c9bfe2a2ad 100644
--- a/packages/nc-gui/pages/index/index/create.vue
+++ b/packages/nc-gui/pages/index/index/create.vue
@@ -51,8 +51,9 @@ const createProject = async () => {
     await navigateTo(`/nc/${result.id}`)
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    creating.value = false
   }
-  creating.value = false
 }
 
 const input: VNodeRef = ref<typeof Input>()