fix: Added loading state to comment/audit list in expanded form

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" />

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>