From 0c45e79edd13b16a16b011a1d8d623bf027bbbf9 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 19 Oct 2023 11:31:14 +0000
Subject: [PATCH] fix: Added loading state to comment/audit list in expanded
 form

---
 .../components/smartsheet/expanded-form/Comments.vue  | 11 ++++++++++-
 .../components/smartsheet/expanded-form/index.vue     |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index 8eb7c149c8..31c3c094b9 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/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()
@@ -160,7 +166,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" />
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 8bbdcbf53a..69f1c52da6 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/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>