refactor(nc-gui): defer loading project to subpage

packages/nc-gui/components/tabs/auth/UserManagement.vue

@@ -5,7 +5,7 @@ import UsersModal from './user-management/UsersModal.vue'
 import FeedbackForm from './user-management/FeedbackForm.vue'
 import {
   extractSdkResponseErrorMsg,
-  onMounted,
+  onBeforeMount,
   projectRoleTagColors,
   ref,
   useApi,
@@ -128,7 +128,7 @@ const resendInvite = async (user: User) => {
   if (!project.value?.id) return
 
   try {
-    await api.auth.projectUserResendInvite(project.value.id, user.id)
+    await api.auth.projectUserResendInvite(project.value.id, user.id, null)
 
     // Invite email sent successfully
     message.success(t('msg.success.inviteEmailSent'))
@@ -150,11 +150,13 @@ const copyInviteUrl = (user: User) => {
   $e('c:user:copy-url')
 }
 
-onMounted(() => {
+onBeforeMount(async () => {
   if (!users) {
     isLoading = true
 
-    loadUsers().finally(() => (isLoading = false))
+    await loadUsers()
+
+    isLoading = false
   }
 })
 
@@ -162,9 +164,10 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
 </script>
 
 <template>
-  <div v-if="isLoading" class="h-full w-full flex flex-row justify-center mt-42">
+  <div v-if="isLoading" class="h-full w-full flex items-center justify-center">
     <a-spin size="large" />
   </div>
+
   <div v-else class="flex flex-col w-full px-6">
     <UsersModal
       :key="showUserModal"

packages/nc-gui/composables/useSharedView.ts

@@ -17,7 +17,7 @@ export function useSharedView() {
   const formColumns = computed(
     () =>
       meta.value.columns
-        .filter(
+        ?.filter(
           (f: Record<string, any>) =>
             f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
         )

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
-import { useI18n } from 'vue-i18n'
 import {
   computed,
   definePageMeta,
@@ -14,26 +13,26 @@ import {
   ref,
   useClipboard,
   useGlobal,
+  useI18n,
   useProject,
   useRoute,
   useTabs,
   useUIPermission,
 } from '#imports'
-import { TabType } from '~/composables'
 
 definePageMeta({
   hideHeader: true,
 })
 
-const route = useRoute()
+const { t } = useI18n()
 
-const router = useRouter()
+const route = useRoute()
 
 const { appInfo, token, signOut, signedIn, user } = useGlobal()
 
-const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo, saveTheme } = useProject()
+const { project, isSharedBase, loadProjectMetaInfo, projectMetaInfo, saveTheme } = useProject()
 
-const { addTab, clearTabs } = useTabs()
+const { clearTabs } = useTabs()
 
 const { isUIAllowed } = useUIPermission()
 
@@ -62,27 +61,11 @@ const logout = () => {
   navigateTo('/signin')
 }
 
-onKeyStroke(
-  'Escape',
-  () => {
-    dropdownOpen.value = false
-  },
-  { eventName: 'keydown' },
-)
-
-clearTabs()
-
 function toggleDialog(value?: boolean, key?: string) {
   dialogOpen.value = value ?? !dialogOpen.value
   openDialogKey.value = key
 }
 
-await loadProject()
-
-await loadTables()
-
-const { t } = useI18n()
-
 const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color: string) => {
   switch (mode) {
     case 'swatch': {
@@ -117,10 +100,6 @@ const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color: st
   }
 }
 
-if (!route.params.type && isUIAllowed('teamAndAuth')) {
-  addTab({ type: TabType.AUTH, title: t('title.teamAndAuth') })
-}
-
 const copyProjectInfo = async () => {
   try {
     await loadProjectMetaInfo()
@@ -150,11 +129,15 @@ const copyAuthToken = async () => {
   }
 }
 
-/** If v1 url found navigate to corresponding new url */
-const { type, name, view } = route.query
-if (type && name) {
-  router.replace(`/nc/${route.params.projectId}/${type}/${name}${view ? `/${view}` : ''}`)
-}
+onKeyStroke(
+  'Escape',
+  () => {
+    dropdownOpen.value = false
+  },
+  { eventName: 'keydown' },
+)
+
+clearTabs()
 </script>
 
 <template>

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

@@ -1,15 +1,58 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
 import { TabType } from '~/composables'
-import { TabMetaInj, provide, useGlobal, useSidebar, useTabs } from '#imports'
+import {
+  TabMetaInj,
+  onBeforeMount,
+  provide,
+  ref,
+  useGlobal,
+  useI18n,
+  useProject,
+  useRoute,
+  useRouter,
+  useSidebar,
+  useTabs,
+  useUIPermission,
+} from '#imports'
 import MdiAirTableIcon from '~icons/mdi/table-large'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
 
-const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
+const { t } = useI18n()
+
+const { loadProject, loadTables } = useProject()
+
+const { tabs, activeTabIndex, activeTab, closeTab, addTab } = useTabs()
 
 const { isLoading } = useGlobal()
 
+const route = useRoute()
+
+const router = useRouter()
+
+const { isUIAllowed } = useUIPermission()
+
+const isReady = ref(false)
+
+onBeforeMount(async () => {
+  await loadProject()
+
+  if (!route.params.type && isUIAllowed('teamAndAuth')) {
+    addTab({ type: TabType.AUTH, title: t('title.teamAndAuth') })
+  }
+
+  /** If v1 url found navigate to corresponding new url */
+  const { type, name, view } = route.query
+  if (type && name) {
+    await router.replace(`/nc/${route.params.projectId}/${type}/${name}${view ? `/${view}` : ''}`)
+  }
+
+  await loadTables()
+
+  isReady.value = true
+})
+
 provide(TabMetaInj, activeTab)
 
 const icon = (tab: TabItem) => {
@@ -71,13 +114,17 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
           <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-gray-200">
             {{ $t('general.loading') }}
 
-            <MdiLoading :class="{ 'animate-infinite animate-spin': isLoading }" />
+            <MdiLoading class="animate-infinite animate-spin" />
           </div>
         </div>
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">
-        <NuxtPage />
+        <NuxtPage v-if="isReady" />
+
+        <div v-else class="w-full h-full flex justify-center items-center">
+          <a-spin size="large" />
+        </div>
       </div>
     </div>
   </div>

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

@@ -22,11 +22,11 @@ const route = useRoute()
       <div class="flex flex-1 justify-between gap-6 lg:block">
         <template v-if="route.name === 'index-index'">
           <TransitionGroup name="page" mode="out-in">
-            <div>
+            <div key="social-card">
               <GeneralSocialCard />
             </div>
 
-            <div class="block mt-0 lg:(!mt-6) xl:hidden">
+            <div key="sponsors" class="block mt-0 lg:(!mt-6) xl:hidden">
               <GeneralSponsors />
             </div>
           </TransitionGroup>

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

@@ -176,18 +176,18 @@ const getProjectPrimary = (project: ProjectType) => {
     </div>
 
     <TransitionGroup name="layout" mode="out-in">
-      <div v-if="isLoading">
+      <div v-if="isLoading" key="skeleton">
         <a-skeleton />
       </div>
 
       <a-table
         v-else
+        key="table"
         :custom-row="
           (record) => ({
             onClick: () => {
-              $e('a:project:open')
-
               navigateTo(`/nc/${record.id}`)
+              $e('a:project:open')
             },
             class: ['group'],
           })
@@ -198,6 +198,7 @@ const getProjectPrimary = (project: ProjectType) => {
         <template #emptyText>
           <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
         </template>
+
         <!-- Title -->
         <a-table-column key="title" :title="$t('general.title')" data-index="title">
           <template #default="{ text, record }">