wip(gui): avoid re-rendering smartsheet

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

packages/nc-gui/components/smartsheet/Grid.vue

@@ -326,7 +326,9 @@ const expandedFormOnRowIdDlg = computed({
 provide(ReloadRowDataHookInj, reloadViewDataHook)
 
 // trigger initial data load in grid
-reloadViewDataHook.trigger()
+// reloadViewDataHook.trigger()
+
+watch(meta, () => reloadViewDataHook.trigger(), { immediate: true })
 </script>
 
 <template>

packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue

@@ -214,6 +214,12 @@ function openDeleteDialog(view: Record<string, any>) {
     close(1000)
   }
 }
+
+watch(views, (nextViews) => {
+  if(nextViews?.length && (!activeView.value || !nextViews.includes(activeView.value))){
+    activeView.value = nextViews[0]
+  }
+})
 </script>
 
 <template>

packages/nc-gui/composables/useViews.ts

@@ -7,6 +7,7 @@ export function useViews(meta: MaybeRef<TableType | undefined>) {
 
   const { $api } = useNuxtApp()
 
+
   const loadViews = async () => {
     const _meta = unref(meta)
 
@@ -18,7 +19,7 @@ export function useViews(meta: MaybeRef<TableType | undefined>) {
     }
   }
 
-  watch(() => meta, loadViews, { immediate: true })
+  watch(meta, loadViews, { immediate: true })
 
   return { views: $$(views), loadViews }
 }

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

@@ -491,10 +491,10 @@ onBeforeUnmount(reset)
       </a-layout-sider>
     </template>
 
-    <div :key="$route.fullPath.split('?')[0]">
+    <div>
       <LazyDashboardSettingsModal v-model="dialogOpen" :open-key="openDialogKey" />
 
-      <NuxtPage />
+      <NuxtPage  pageKey="test"/>
 
       <LazyGeneralPreviewAs float />
     </div>

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

@@ -79,7 +79,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">
-        <NuxtPage />
+        <NuxtPage pageKey="test"/>
       </div>
     </div>
   </div>

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

@@ -16,19 +16,28 @@ const activeTab = inject(
 )
 
 /** wait until table list loads since meta load requires table list **/
-until(tables)
+// until(tables)
+//   .toMatch((tables) => tables.length > 0)
+//   .then(() => {
+//     getMeta(route.params.title as string, true).finally(() => (loading.value = false))
+//   })
+
+watch(() => route.params.title, (tableTitle) => {
+    until(tables)
     .toMatch((tables) => tables.length > 0)
     .then(() => {
-    getMeta(route.params.title as string, true).finally(() => (loading.value = false))
+      getMeta(tableTitle as string, true).finally(() => (loading.value = false))
     })
+}, {immediate: true})
+
 </script>
 
 <template>
   <div class="w-full h-full">
-    <div v-if="loading" class="flex items-center justify-center h-full w-full">
+<!--    <div v-if="loading" class="flex items-center justify-center h-full w-full">-->
-      <a-spin size="large" />
+<!--      <a-spin size="large" />-->
-    </div>
+<!--    </div>-->
 
-    <LazyTabsSmartsheet v-else :key="route.params.title" :active-tab="activeTab" />
+    <LazyTabsSmartsheet :active-tab="activeTab" />
   </div>
 </template>