diff --git a/packages/nc-gui/components/smartsheet/sidebar/index.vue b/packages/nc-gui/components/smartsheet/sidebar/index.vue
index 5478223bda..137fce1f75 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/index.vue
@@ -8,6 +8,7 @@ import {
   inject,
   provide,
   ref,
+  useNuxtApp,
   useRoute,
   useRouter,
   useSidebar,
@@ -102,7 +103,7 @@ function onCreate(view: ViewType) {
     ref="sidebar"
     :collapsed="sidebarCollapsed"
     collapsiple
-    collapsed-width="50"
+    collapsed-width="0"
     width="250"
     class="relative shadow-md h-full"
     theme="light"
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index 1efd57026c..ea912fe9e4 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -15,6 +15,7 @@ import {
   inject,
   provide,
   ref,
+  toRef,
   useMetas,
   useProvideSmartsheetStore,
   useSidebar,
@@ -22,24 +23,24 @@ import {
 } from '#imports'
 import type { TabItem } from '~/lib'
 
-const { activeTab } = defineProps<{
+const props = defineProps<{
   activeTab: TabItem
 }>()
 
 const { metas } = useMetas()
 
-const activeView = ref()
+const activeTab = toRef(props, 'activeTab')
 
-const el = ref()
+const activeView = ref()
 
 const fields = ref<ColumnType[]>([])
 
-provide(TabMetaInj, ref(activeTab))
-const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string])
+const meta = computed<TableType | undefined>(() => metas.value[activeTab.value.id!])
 
 const reloadEventHook = createEventHook()
 
 const reloadViewMetaEventHook = createEventHook()
+
 const openNewRecordFormHook = createEventHook()
 
 const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView, meta)
@@ -56,6 +57,7 @@ provide(ReloadViewMetaHookInj, reloadViewMetaEventHook)
 provide(OpenNewRecordFormHookInj, openNewRecordFormHook)
 provide(FieldsInj, fields)
 provide(IsFormInj, isForm)
+provide(TabMetaInj, activeTab)
 
 const treeViewIsLockedInj = inject('TreeViewIsLockedInj', ref(false))
 
@@ -71,7 +73,7 @@ watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immedi
         <template v-if="meta">
           <div class="flex flex-1 min-h-0">
             <div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-gray-50">
-              <LazySmartsheetGrid v-if="isGrid" :ref="el" />
+              <LazySmartsheetGrid v-if="isGrid" />
 
               <LazySmartsheetGallery v-else-if="isGallery" />
 
diff --git a/packages/nc-gui/nuxt.config.ts b/packages/nc-gui/nuxt.config.ts
index 4e664c870a..d4c52bb6a9 100644
--- a/packages/nc-gui/nuxt.config.ts
+++ b/packages/nc-gui/nuxt.config.ts
@@ -14,6 +14,15 @@ export default defineNuxtConfig({
   ssr: false,
 
   app: {
+    pageTransition: {
+      name: 'page',
+      mode: 'out-in',
+    },
+    layoutTransition: {
+      name: 'layout',
+      mode: 'out-in',
+    },
+
     /** In production build we need to load assets using relative path, to achieve the result we are using cdnURL */
     cdnURL: process.env.NODE_ENV === 'production' ? '.' : undefined,
   },
@@ -166,13 +175,4 @@ export default defineNuxtConfig({
       { name: 'useJwt', from: '@vueuse/integrations/useJwt' },
     ],
   },
-
-  pageTransition: {
-    name: 'page',
-    mode: 'out-in',
-  },
-  layoutTransition: {
-    name: 'layout',
-    mode: 'out-in',
-  },
 })
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index efa3e84544..447b3fa577 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -81,13 +81,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">
-        <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>
+        <NuxtPage />
       </div>
     </div>
   </div>