fix(nc-gui): defer loading subpages until project is ready

packages/nc-gui/composables/useProject.ts

@@ -47,7 +47,7 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
 
   const projectMeta = computed<Record<string, any>>(() => {
     try {
-      return project.value.meta && isString(project.value.meta) ? JSON.parse(project.value.meta) : project.value.meta
+      return isString(project.value.meta) ? JSON.parse(project.value.meta) : project.value.meta
     } catch (e) {
       return {}
     }
@@ -168,9 +168,6 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     projectRoles.value = {}
   }
 
-  // TODO useProject should only called inside a project for now this doesn't work
-  // onScopeDispose(reset)
-
   return {
     project,
     tables,

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

@@ -36,16 +36,7 @@ const router = useRouter()
 
 const { appInfo, token, signOut, signedIn, user } = useGlobal()
 
-const {
-  project,
-  isSharedBase,
-  loadProjectMetaInfo,
-  projectMetaInfo,
-  saveTheme,
-  isLoading: isLoadingProject,
-  loadProject,
-  reset,
-} = useProject()
+const { project, isSharedBase, loadProjectMetaInfo, projectMetaInfo, saveTheme, loadProject, reset } = useProject()
 
 const { clearTabs, addTab } = useTabs()
 
@@ -155,9 +146,7 @@ onKeyStroke(
 clearTabs()
 
 onBeforeMount(async () => {
-  if (!isLoadingProject.value) {
-    await loadProject()
-  }
+  await loadProject()
 
   if (!route.params.type && isUIAllowed('teamAndAuth')) {
     addTab({ type: TabType.AUTH, title: t('title.teamAndAuth') })

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

@@ -79,9 +79,11 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">
-        <NuxtPage v-if="!isLoadingProject" />
+        <div v-show="!isLoadingProject" class="w-full h-full">
+          <NuxtPage />
+        </div>
 
-        <div v-else class="w-full h-full flex justify-center items-center">
+        <div v-show="isLoadingProject" class="w-full h-full flex justify-center items-center">
           <a-spin size="large" />
         </div>
       </div>

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

@@ -3,7 +3,11 @@ import type { TabItem } from '~/composables'
 import { TabMetaInj } from '#imports'
 
 const { getMeta } = useMetas()
+
+const { project, projectLoadedHook } = useProject()
+
 const route = useRoute()
+
 const loading = ref(true)
 
 const activeTab = inject(
@@ -11,9 +15,14 @@ const activeTab = inject(
   computed(() => ({} as TabItem)),
 )
 
-getMeta(route.params.title as string, true).finally(() => {
-  loading.value = false
-})
+if (!project.value.id) {
+  projectLoadedHook(async () => {
+    await getMeta(route.params.title as string, true)
+    loading.value = false
+  })
+} else {
+  getMeta(route.params.title as string, true).finally(() => (loading.value = false))
+}
 </script>
 
 <template>

packages/nc-gui/pages/index/index/index.vue

@@ -122,8 +122,6 @@ const customRow = (record: ProjectType) => ({
     await navigateTo(`/nc/${record.id}`)
 
     $e('a:project:open')
-
-    await loadProject(record.id)
   },
   class: ['group'],
 })