revert(nc-gui): show spinner

packages/nc-gui/app.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { computed, useRoute } from '#imports'
+import { computed, useRoute, useTheme } from '#imports'
 
 const route = useRoute()
 
 const disableBaseLayout = computed(() => route.path.startsWith('/nc/view') || route.path.startsWith('/nc/form'))
+
+useTheme()
 </script>
 
 <template>

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

@@ -150,7 +150,7 @@ onKeyStroke(
 clearTabs()
 
 onBeforeMount(async () => {
-  await loadProject(route.params.projectId as string)
+  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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { TabItem } from '~/lib'
 import { TabType } from '~/lib'
-import { TabMetaInj, iconMap, provide, useGlobal, useSidebar, useTabs } from '#imports'
+import { TabMetaInj, iconMap, provide, useGlobal, useProject, useSidebar, useTabs } from '#imports'
+
+const { isLoading: isLoadingProject } = useProject()
 
 const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
 
@@ -79,9 +81,13 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">
-        <div class="w-full h-full">
+        <div v-show="!isLoadingProject" class="w-full h-full">
           <NuxtPage />
         </div>
+
+        <div v-show="isLoadingProject" class="w-full h-full flex justify-center items-center">
+          <a-spin size="large" />
+        </div>
       </div>
     </div>
   </div>