fix(gui-v2): avoid duplicate meta api call by keeping active loading state

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

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -2,7 +2,7 @@
 import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
 import { Empty } from 'ant-design-vue'
-import { useNuxtApp, useRoute } from '#app'
+import { useNuxtApp } from '#app'
 import { computed, useProject, useTable, useTabs, watchEffect } from '#imports'
 import { TabType } from '~/composables'
 import MdiView from '~icons/mdi/eye-circle-outline'
@@ -14,8 +14,6 @@ const { addTab } = useTabs()
 
 const { $api, $e } = useNuxtApp()
 
-const route = useRoute()
-
 const { tables, loadTables } = useProject()
 const { activeTab } = useTabs()
 const { deleteTable } = useTable()

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

@@ -1,6 +1,8 @@
+import { message } from 'ant-design-vue'
 import type { WatchStopHandle } from 'vue'
 import type { TableInfoType, TableType } from 'nocodb-sdk'
 import { useProject } from './useProject'
+import { extractSdkResponseErrorMsg } from '~/utils'
 import { useNuxtApp, useState } from '#app'
 
 export function useMetas() {
@@ -11,53 +13,62 @@ export function useMetas() {
   const loadingState = useState<Record<string, boolean>>('metas-loading-state', () => ({}))
 
   const getMeta = async (tableIdOrTitle: string, force = false): Promise<TableType | TableInfoType | null> => {
-    if (!force && metas.value[tableIdOrTitle]) return metas.value[tableIdOrTitle]
-
-    const modelId = (tables.value.find((t) => t.title === tableIdOrTitle || t.id === tableIdOrTitle) || {}).id
-
-    if (!modelId) {
-      console.warn(`Table '${tableIdOrTitle}' is not found in the table list`)
-      return null
-    }
-
     /** wait until loading is finished if requesting same meta */
-    if (!force) {
+    if (!force && loadingState.value[tableIdOrTitle]) {
       await new Promise((resolve) => {
         let unwatch: WatchStopHandle
 
+        // set maximum 20sec timeout to wait loading meta
         const timeout = setTimeout(() => {
           unwatch?.()
           clearTimeout(timeout)
           resolve(null)
-        }, 20000)
+        }, 10000)
 
+        // watch for loading state change
         unwatch = watch(
-          () => loadingState.value[modelId],
+          () => !!loadingState.value[tableIdOrTitle],
           (isLoading) => {
             if (!isLoading) {
               clearTimeout(timeout)
-              resolve(null)
               unwatch?.()
+              resolve(null)
             }
           },
           { immediate: true },
         )
       })
-      if (metas.value[modelId]) return metas.value[modelId]
+      if (metas.value[tableIdOrTitle]) {
+        return metas.value[tableIdOrTitle]
+      }
     }
+    loadingState.value[tableIdOrTitle] = true
+    try {
+      if (!force && metas.value[tableIdOrTitle]) {
+        return metas.value[tableIdOrTitle]
+      }
 
-    loadingState.value[modelId] = true
+      const modelId = tableIdOrTitle.startsWith('md_') ? tableIdOrTitle : tables.value.find((t) => t.title === tableIdOrTitle)?.id
 
-    const model = await $api.dbTable.read(modelId)
-    metas.value = {
-      ...metas.value,
-      [model.id!]: model,
-      [model.title]: model,
-    }
+      if (!modelId) {
+        console.warn(`Table '${tableIdOrTitle}' is not found in the table list`)
+        return null
+      }
 
-    loadingState.value[modelId] = false
+      const model = await $api.dbTable.read(modelId)
+      metas.value = {
+        ...metas.value,
+        [model.id!]: model,
+        [model.title]: model,
+      }
 
-    return model
+      return model
+    } catch (e: any) {
+      message.error(await extractSdkResponseErrorMsg(e))
+    } finally {
+      delete loadingState.value[tableIdOrTitle]
+    }
+    return null
   }
 
   const clearAllMeta = () => {

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

@@ -1,5 +1,4 @@
 import type { WritableComputedRef } from '@vue/reactivity'
-import type { RouterConfig } from '@nuxt/schema'
 import { navigateTo, useProject, useRoute, useState } from '#imports'
 
 export enum TabType {