Merge pull request #3342 from nocodb/fix/forced-meta-loading-when-tab-changed

vue3: Forced meta loading when tab changes

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 {
+  isLoading,
   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="isLoading" 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/components/tabs/Smartsheet.vue

@@ -10,7 +10,6 @@ import {
   MetaInj,
   OpenNewRecordFormHookInj,
   ReloadViewDataHookInj,
-  TabMetaInj,
   computed,
   inject,
   provide,
@@ -18,12 +17,11 @@ import {
   useMetas,
   useProvideSmartsheetStore,
   watch,
-  watchEffect,
 } from '#imports'
 
 import type { TabItem } from '~/composables'
 
-const { getMeta, metas } = useMetas()
+const { metas } = useMetas()
 
 const activeView = ref()
 
@@ -35,13 +33,8 @@ const tabMeta = inject(
   TabMetaInj,
   computed(() => ({} as TabItem)),
 )
-
 const meta = computed<TableType>(() => metas.value?.[tabMeta?.value?.id as string])
 
-watchEffect(async () => {
-  await getMeta(tabMeta?.value?.id as string)
-})
-
 const reloadEventHook = createEventHook<void>()
 const openNewRecordFormHook = createEventHook<void>()
 
@@ -52,7 +45,6 @@ provideSidebar({ storageKey: 'nc-right-sidebar' })
 
 // todo: move to store
 provide(MetaInj, meta)
-provide(TabMetaInj, tabMeta)
 provide(ActiveViewInj, activeView)
 provide(IsLockedInj, isLocked)
 provide(ReloadViewDataHookInj, reloadEventHook)
@@ -62,10 +54,6 @@ provide(IsFormInj, isForm)
 
 const treeViewIsLockedInj = inject('TreeViewIsLockedInj', ref(false))
 
-watch(tabMeta, async (newTabMeta, oldTabMeta) => {
-  if (newTabMeta !== oldTabMeta && newTabMeta?.id) await getMeta(newTabMeta.id)
-})
-
 watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immediate: true })
 </script>
 

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

@@ -10,6 +10,7 @@ import {
   getHTMLEncodedText,
   useProject,
   useUIPermission,
+  useApi
 } from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
@@ -38,6 +39,7 @@ export function useViewData(
     throw new Error('Table meta is not available')
   }
 
+  const { api, isLoading, error } = useApi()
   const _paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
   const galleryData = ref<GalleryType>()
@@ -114,9 +116,8 @@ 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
-
     const response = !isPublic.value
-      ? await $api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
+      ? await api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
         ...params,
         ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
         ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
@@ -192,7 +193,8 @@ export function useViewData(
           value: getHTMLEncodedText(toUpdate.row[property]),
           prev_value: getHTMLEncodedText(toUpdate.oldRow[property]),
         })
-        .then(() => {})
+        .then(() => {
+        })
 
       /** update row data(to sync formula and other related columns) */
       Object.assign(toUpdate.row, updatedRowData)
@@ -234,7 +236,7 @@ export function useViewData(
 
   const deleteRowById = async (id: string) => {
     if (!id) {
-      throw new Error("Delete not allowed for table which doesn't have primary Key")
+      throw new Error('Delete not allowed for table which doesn\'t have primary Key')
     }
 
     const res: any = await $api.dbViewRow.delete(
@@ -351,6 +353,8 @@ export function useViewData(
   }
 
   return {
+    error,
+    isLoading,
     loadData,
     paginationData,
     queryParams,

packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue

@@ -92,6 +92,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
     .ant-tabs-nav-add {
       @apply !hidden;
     }
+
     .ant-tabs-nav-more {
       @apply text-white;
     }

packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue

@@ -1,11 +1,18 @@
-<script>
+<script setup lang="ts">
-export default {
+const { getMeta } = useMetas()
-  name: 'Index',
+const route = useRoute()
-}
+const loading = ref(true)
+
+getMeta(route.params.title as string, true).finally(() => {
+  loading.value = false
+})
 </script>
 
 <template>
-  <TabsSmartsheet />
+  <div v-if="loading" class="flex items-center justify-center h-full w-full">
+    <a-spin size="large" />
+  </div>
+  <TabsSmartsheet v-else />
 </template>
 
 <style scoped></style>