fix: Added loading for adding comment

packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@@ -96,8 +96,22 @@ function scrollComments() {
   if (commentsWrapperEl.value) commentsWrapperEl.value.scrollTop = commentsWrapperEl.value?.scrollHeight
 }
 
+const isSaving = ref(false)
+
 const saveComment = async () => {
-  await _saveComment(() => setTimeout(() => scrollComments(), 100))
+  if (isSaving.value) return
+
+  isSaving.value = true
+
+  try {
+    await _saveComment()
+
+    scrollComments()
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isSaving.value = false
+  }
 }
 
 watch(commentsWrapperEl, () => {
@@ -237,10 +251,12 @@ const onClickAudit = () => {
               v-e="['a:row-expand:comment:save']"
               size="medium"
               class="!w-8"
-              :disabled="!comment.length"
+              :loading="isSaving"
+              :disabled="!isSaving && !comment.length"
+              :icon-only="isSaving"
               @click="saveComment"
             >
-              <GeneralIcon icon="send" />
+              <GeneralIcon v-if="!isSaving" icon="send" />
             </NcButton>
           </div>
         </div>

packages/nc-gui/composables/useExpandedFormStore.ts

@@ -60,8 +60,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
   const { isUIAllowed } = useRoles()
 
-  const isSaving = ref(false)
-
   // getters
   const displayValue = computed(() => {
     if (row?.value?.row) {
@@ -131,7 +129,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     }
   }
 
-  const saveComment = async (scrollToCreateComment?: any) => {
+  const saveComment = async () => {
     try {
       if (!row.value || !comment.value) return
 
@@ -139,42 +137,19 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
       if (!rowId) return
 
-      isSaving.value = true
+      await api.utils.commentRow({
-
-      const createdDate = new Date().toISOString()
-      const createdIndex = commentsAndLogs.value.length
-
-      commentsAndLogs.value.push({
-        created_at: createdDate,
-        description: `The following comment has been created: ${comment.value}`,
-        email: user?.value?.email,
-        user: user?.value?.email,
-        id: '',
-        display_name: user.value?.display_name,
-        row_id: rowId,
-        updated_at: createdDate,
-        op_type: 'COMMENT',
-        new: true,
-      })
-
-      const commentValue = comment.value
-      comment.value = ''
-
-      if (scrollToCreateComment) scrollToCreateComment()
-
-      const createdComment = await api.utils.commentRow({
         fk_model_id: meta.value?.id as string,
         row_id: rowId,
-        description: `The following comment has been created: ${commentValue}`,
+        description: `The following comment has been created: ${comment.value}`,
       })
 
-      commentsAndLogs.value[createdIndex] = createdComment
-
       reloadTrigger?.trigger()
+
+      await loadCommentsAndLogs()
+
+      comment.value = ''
     } catch (e: any) {
       message.error(e.message)
-    } finally {
-      isSaving.value = false
     }
 
     $e('a:row-expand:comment')