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,20 +115,27 @@ export function useViewData(
   }
 
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
-    if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
+    try {
-
+      if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
-    const response = !isPublic.value
+      loading.value = true
-      ? await $api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
+      error.value = null
-          ...params,
+      const response = !isPublic.value
-          ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
+        ? await $api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
-          ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
+            ...params,
-          where: where?.value,
+            ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
-        })
+            ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
-      : await fetchSharedViewData()
+            where: where?.value,
-    formattedData.value = formatData(response.list)
+          })
-    paginationData.value = response.pageInfo
+        : await fetchSharedViewData()
-
+      formattedData.value = formatData(response.list)
-    await loadAggCommentsCount()
+      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,