Merge pull request #6739 from nocodb/nc-fix/comment-save-delay-removed

Nc fix/comment save delay removed

packages/nc-gui/components/nc/Button.vue

@@ -20,6 +20,7 @@ interface Props {
   type?: ButtonType | 'danger' | 'secondary' | undefined
   size?: NcButtonSize
   centered?: boolean
+  iconOnly?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -107,7 +108,7 @@ useEventListener(NcButton, 'mousedown', () => {
 
       <slot v-else name="icon" />
       <div
-        v-if="!(size === 'xxsmall' && loading)"
+        v-if="!(size === 'xxsmall' && loading) && !props.iconOnly"
         class="flex flex-row items-center"
         :class="{
           'font-medium': type === 'primary' || type === 'danger',

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

@@ -4,12 +4,18 @@ import type { AuditType } from 'nocodb-sdk'
 import { Icon } from '@iconify/vue'
 import { ref, timeAgo, useExpandedFormStoreOrThrow, useGlobal, useRoles, watch } from '#imports'
 
+const props = defineProps<{
+  isLoading: boolean
+}>()
+
 const { loadCommentsAndLogs, commentsAndLogs, saveComment: _saveComment, comment, updateComment } = useExpandedFormStoreOrThrow()
 
 const commentsWrapperEl = ref<HTMLDivElement>()
 
 const { user, appInfo } = useGlobal()
 
+const isExpandedFormLoading = computed(() => props.isLoading)
+
 const tab = ref<'comments' | 'audits'>('comments')
 
 const { isUIAllowed } = useRoles()
@@ -90,9 +96,22 @@ function scrollComments() {
   if (commentsWrapperEl.value) commentsWrapperEl.value.scrollTop = commentsWrapperEl.value?.scrollHeight
 }
 
+const isSaving = ref(false)
+
 const saveComment = async () => {
+  if (isSaving.value) return
+
+  isSaving.value = true
+
+  try {
     await _saveComment()
+
     scrollComments()
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isSaving.value = false
+  }
 }
 
 watch(commentsWrapperEl, () => {
@@ -160,7 +179,10 @@ const onClickAudit = () => {
         'pb-2': tab !== 'comments' && !appInfo.ee,
       }"
     >
-      <div v-if="tab === 'comments'" class="flex flex-col h-full">
+      <div v-if="isExpandedFormLoading" class="flex flex-col h-full">
+        <GeneralLoader class="!mt-16" size="xlarge" />
+      </div>
+      <div v-else-if="tab === 'comments'" class="flex flex-col h-full">
         <div v-if="comments.length === 0" class="flex flex-col my-1 text-center justify-center h-full">
           <div class="text-center text-3xl text-gray-700">
             <GeneralIcon icon="commentHere" />
@@ -229,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/components/smartsheet/expanded-form/index.vue

@@ -761,7 +761,7 @@ export default {
           class="nc-comments-drawer border-1 relative border-gray-200 w-1/3 max-w-125 bg-gray-50 rounded-xl min-w-0 overflow-hidden h-full xs:hidden"
           :class="{ active: commentsDrawer && isUIAllowed('commentList') }"
         >
-          <SmartsheetExpandedFormComments />
+          <SmartsheetExpandedFormComments :loading="isLoading" />
         </div>
       </div>
     </div>

packages/nc-gui/composables/useExpandedFormStore.ts

@@ -31,6 +31,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
 
   const { t } = useI18n()
 
+  const { user } = useGlobal()
+
   const commentsOnly = ref(false)
 
   const commentsAndLogs = ref<any[]>([])
@@ -141,11 +143,11 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
         description: `The following comment has been created: ${comment.value}`,
       })
 
-      comment.value = ''
-
       reloadTrigger?.trigger()
 
       await loadCommentsAndLogs()
+
+      comment.value = ''
     } catch (e: any) {
       message.error(e.message)
     }