enhancement(gui-v2): show spinner while loading grid data

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -79,6 +79,7 @@ const expandedFormRowState = ref<Record<string, any>>()
 const visibleColLength = $computed(() => fields.value?.length)
 
 const {
+  loading,
   loadData,
   paginationData,
   formattedData: data,
@@ -311,7 +312,10 @@ const onNavigate = (dir: NavigateDir) => {
 
 <template>
   <div class="flex flex-col h-full min-h-0 w-full">
-    <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
+    <div v-if="loading" class="flex items-center justify-center h-full w-full">
+      <a-spin size="large" />
+    </div>
+    <div v-else class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
         <table
           ref="smartTable"

packages/nc-gui-v2/composables/useViewData.ts

@@ -38,6 +38,8 @@ export function useViewData(
     throw new Error('Table meta is not available')
   }
 
+  const loading = ref(false)
+  const error = ref<any>()
   const _paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
   const galleryData = ref<GalleryType>()
@@ -113,8 +115,10 @@ export function useViewData(
   }
 
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
+    try {
       if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
-
+      loading.value = true
+      error.value = null
       const response = !isPublic.value
         ? await $api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
             ...params,
@@ -127,6 +131,11 @@ export function useViewData(
       paginationData.value = response.pageInfo
 
       await loadAggCommentsCount()
+    } catch (e: any) {
+      error.value = e
+    } finally {
+      loading.value = false
+    }
   }
 
   const loadGalleryData = async () => {
@@ -351,6 +360,8 @@ export function useViewData(
   }
 
   return {
+    error,
+    loading,
     loadData,
     paginationData,
     queryParams,