From 2d906e99b58c157f7f213d701f0dfc9a51bcecb1 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 22 Nov 2023 15:17:29 +0000
Subject: [PATCH] fix: Show skelton loader immediatly when a table is opened

---
 .../dashboard/TreeView/TableNode.vue          | 10 ++-
 .../components/smartsheet/grid/Table.vue      | 13 +++-
 .../nc-gui/components/tabs/Smartsheet.vue     | 14 ++---
 packages/nc-gui/composables/useTableNew.ts    | 62 ++++++++++++++-----
 4 files changed, 73 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index 1e29a1ef5f..577c13977c 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -9,7 +9,7 @@ import { ProjectRoleInj, TreeViewInj, useNuxtApp, useRoles, useTabs } from '#imp
 const props = withDefaults(
   defineProps<{
     base: BaseType
-    table: TableType
+    table: TableType & { isViewsLoading?: boolean }
     sourceIndex: number
   }>(),
   { sourceIndex: 0 },
@@ -174,7 +174,15 @@ const isTableOpened = computed(() => {
             class="nc-sidebar-node-btn nc-sidebar-expand"
             @click.stop="onExpand"
           >
+            <GeneralLoader
+              v-if="table.isViewsLoading"
+              class="flex w-4 h-4 !text-gray-600"
+              :class="{
+                '!visible': !isExpanded,
+              }"
+            />
             <GeneralIcon
+              v-else
               icon="triangleFill"
               class="nc-sidebar-source-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90"
               :class="{ '!rotate-180': isExpanded }"
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 7235f2af4f..4f16723f67 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -142,7 +142,12 @@ const { getMeta } = useMetas()
 
 const { addUndo, clone, defineViewScope } = useUndoRedo()
 
-const { isViewColumnsLoading, updateGridViewColumn, gridViewCols, resizingColOldWith } = useViewColumnsOrThrow()
+const {
+  isViewColumnsLoading: _isViewColumnsLoading,
+  updateGridViewColumn,
+  gridViewCols,
+  resizingColOldWith,
+} = useViewColumnsOrThrow()
 
 const { isExpandedFormCommentMode } = storeToRefs(useConfigStore())
 
@@ -179,6 +184,8 @@ const fillHandle = ref<HTMLElement>()
 
 const gridRect = useElementBounding(gridWrapper)
 
+const isViewColumnsLoading = computed(() => _isViewColumnsLoading.value || !meta.value)
+
 // #Permissions
 const { isUIAllowed } = useRoles()
 const hasEditPermission = computed(() => isUIAllowed('dataEdit') && !isLocked.value)
@@ -409,7 +416,9 @@ const dummyRowDataForLoading = computed(() => {
 })
 
 const showSkeleton = computed(
-  () => disableSkeleton !== true && (isViewDataLoading.value || isPaginationLoading.value || isViewColumnsLoading.value),
+  () =>
+    (disableSkeleton !== true && (isViewDataLoading.value || isPaginationLoading.value || isViewColumnsLoading.value)) ||
+    !meta.value,
 )
 
 // #Grid
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index 6f39953f52..4ac9f6d284 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -171,21 +171,21 @@ watch([activeViewTitleOrId, activeTableId], () => {
         <LazySmartsheetToolbar v-if="!isForm" />
         <div class="flex flex-row w-full" style="height: calc(100% - var(--topbar-height))">
           <Transition name="layout" mode="out-in">
-            <template v-if="meta">
-              <div class="flex flex-1 min-h-0 w-3/4">
-                <div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-white">
-                  <LazySmartsheetGrid v-if="isGrid" ref="grid" />
+            <div class="flex flex-1 min-h-0 w-3/4">
+              <div class="h-full flex-1 min-w-0 min-h-0 bg-white">
+                <LazySmartsheetGrid v-if="isGrid || !meta || !activeView" ref="grid" />
 
-                  <LazySmartsheetGallery v-else-if="isGallery" />
+                <template v-if="activeView && meta">
+                  <LazySmartsheetGallery v-if="isGallery" />
 
                   <LazySmartsheetForm v-else-if="isForm && !$route.query.reload" />
 
                   <LazySmartsheetKanban v-else-if="isKanban" />
 
                   <LazySmartsheetMap v-else-if="isMap" />
-                </div>
+                </template>
               </div>
-            </template>
+            </div>
           </Transition>
         </div>
       </div>
diff --git a/packages/nc-gui/composables/useTableNew.ts b/packages/nc-gui/composables/useTableNew.ts
index 88f15b6f23..38e150101b 100644
--- a/packages/nc-gui/composables/useTableNew.ts
+++ b/packages/nc-gui/composables/useTableNew.ts
@@ -58,7 +58,12 @@ export function useTableNew(param: { onTableCreate?: (tableMeta: TableType) => v
   const tables = computed(() => baseTables.value.get(param.baseId) || [])
   const base = computed(() => bases.value.get(param.baseId))
 
-  const openTable = async (table: TableType) => {
+  const openTable = async (
+    table: TableType & {
+      isMetaLoading?: boolean
+      isViewsLoading?: boolean
+    },
+  ) => {
     if (!table.base_id) return
 
     let base = bases.value.get(table.base_id)
@@ -82,24 +87,49 @@ export function useTableNew(param: { onTableCreate?: (tableMeta: TableType) => v
       baseIdOrBaseId = route.value.params.baseId as string
     }
 
-    await getMeta(table.id as string, (route.value.params?.viewId as string) !== table.id)
+    const navigateToTable = async () => {
+      if (openedViewsTab.value === 'view') {
+        await navigateTo({
+          path: `/${workspaceIdOrType}/${baseIdOrBaseId}/${table?.id}`,
+          query: route.value.query,
+        })
+      }
 
-    await loadViews({ tableId: table.id as string })
+      table.isViewsLoading = true
 
-    const views = viewsByTable.value.get(table.id as string) ?? []
-    if (openedViewsTab.value !== 'view' && views.length && views[0].id) {
-      // find the default view and navigate to it, if not found navigate to the first one
-      const defaultView = views.find((v) => v.is_default) || views[0]
+      try {
+        await loadViews({ tableId: table.id as string })
 
-      await navigateTo({
-        path: `/${workspaceIdOrType}/${baseIdOrBaseId}/${table?.id}/${defaultView.id}/${openedViewsTab.value}`,
-        query: route.value.query,
-      })
-    } else
-      await navigateTo({
-        path: `/${workspaceIdOrType}/${baseIdOrBaseId}/${table?.id}`,
-        query: route.value.query,
-      })
+        const views = viewsByTable.value.get(table.id as string) ?? []
+        if (openedViewsTab.value !== 'view' && views.length && views[0].id) {
+          // find the default view and navigate to it, if not found navigate to the first one
+          const defaultView = views.find((v) => v.is_default) || views[0]
+
+          await navigateTo({
+            path: `/${workspaceIdOrType}/${baseIdOrBaseId}/${table?.id}/${defaultView.id}/${openedViewsTab.value}`,
+            query: route.value.query,
+          })
+        }
+      } catch (e) {
+        console.error(e)
+      } finally {
+        table.isViewsLoading = false
+      }
+    }
+
+    const loadTableMeta = async () => {
+      table.isMetaLoading = true
+
+      try {
+        await getMeta(table.id as string)
+      } catch (e) {
+        console.error(e)
+      } finally {
+        table.isMetaLoading = false
+      }
+    }
+
+    await Promise.all([navigateToTable(), loadTableMeta()])
   }
 
   const createTable = async () => {