fix: Show skelton loader immediatly when a table is opened

packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@@ -5,11 +5,12 @@ import { message } from 'ant-design-vue'
 import { storeToRefs } from 'pinia'
 
 import { ProjectRoleInj, TreeViewInj, useNuxtApp, useRoles, useTabs } from '#imports'
+import type { SidebarTableNode } from '~/lib'
 
 const props = withDefaults(
   defineProps<{
     base: BaseType
-    table: TableType & { isViewsLoading?: boolean }
+    table: SidebarTableNode
     sourceIndex: number
   }>(),
   { sourceIndex: 0 },
@@ -44,7 +45,7 @@ provide(SidebarTableInj, table)
 const { setMenuContext, openRenameTableDialog, duplicateTable } = inject(TreeViewInj)!
 
 const { loadViews: _loadViews } = useViewsStore()
-const { activeView } = storeToRefs(useViewsStore())
+const { activeView, activeViewTitleOrId } = storeToRefs(useViewsStore())
 const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
 
 // todo: temp
@@ -135,7 +136,7 @@ watch(
 )
 
 const isTableOpened = computed(() => {
-  return openedTableId.value === table.value?.id && activeView.value?.is_default
+  return openedTableId.value === table.value?.id && (activeView.value?.is_default || !activeViewTitleOrId.value)
 })
 </script>
 
@@ -176,7 +177,7 @@ const isTableOpened = computed(() => {
           >
             <GeneralLoader
               v-if="table.isViewsLoading"
-              class="flex w-4 h-4 !text-gray-600"
+              class="flex w-4 h-4 !text-gray-600 !mt-0.75"
               :class="{
                 '!visible': !isExpanded,
               }"

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

@@ -48,15 +48,15 @@ const size = computed(() => vPaginationData.value?.pageSize ?? 25)
 const page = computed({
   get: () => vPaginationData?.value?.page ?? 1,
   set: async (p) => {
-    isViewDataLoading.value = true
+    isPaginationLoading.value = true
     try {
       await changePage?.(p)
-      isViewDataLoading.value = false
+      isPaginationLoading.value = false
     } catch (e) {
       if (axios.isCancel(e)) {
         return
       }
-      isViewDataLoading.value = false
+      isPaginationLoading.value = false
     }
   },
 })
@@ -100,7 +100,7 @@ const renderAltOrOptlKey = () => {
         'ml-8': alignLeft,
       }"
     >
-      <div v-if="isPaginationLoading" class="flex flex-row justify-center item-center min-h-10 min-w-42">
+      <div v-if="isViewDataLoading" class="flex flex-row justify-center item-center min-h-10 min-w-42">
         <a-skeleton :active="true" :title="true" :paragraph="false" class="-mt-1 max-w-60" />
       </div>
       <NcPagination

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -1120,22 +1120,6 @@ onBeforeUnmount(async () => {
 reloadViewDataHook?.on(reloadViewDataHandler)
 openNewRecordFormHook?.on(openNewRecordHandler)
 
-// TODO: Use CSS animations
-const showLoaderAfterDelay = ref(false)
-watch([isViewDataLoading, showSkeleton, isPaginationLoading], () => {
-  if (!isViewDataLoading.value && !showSkeleton.value && !isPaginationLoading.value) {
-    showLoaderAfterDelay.value = false
-
-    return
-  }
-
-  showLoaderAfterDelay.value = false
-
-  setTimeout(() => {
-    showLoaderAfterDelay.value = true
-  }, 500)
-})
-
 // #Watchers
 
 // reset context menu target on hide
@@ -1226,7 +1210,7 @@ const handleCellClick = (event: MouseEvent, row: number, col: number) => {
 }
 
 const loaderText = computed(() => {
-  if (isViewDataLoading.value) {
+  if (isPaginationLoading.value) {
     if (paginationDataRef.value?.totalRows && paginationDataRef.value?.pageSize) {
       return `Loading page<br/>${paginationDataRef.value.page} of ${Math.ceil(
         paginationDataRef.value?.totalRows / paginationDataRef.value?.pageSize,
@@ -1265,10 +1249,7 @@ onKeyStroke('ArrowDown', onDown)
       ></div>
     </div>
     <div ref="gridWrapper" class="nc-grid-wrapper min-h-0 flex-1 relative" :class="gridWrapperClass">
-      <div
+      <div v-show="isPaginationLoading" class="flex items-center justify-center absolute l-0 t-0 w-full h-full z-10 pb-10">
-        v-show="showSkeleton && !isPaginationLoading && showLoaderAfterDelay"
-        class="flex items-center justify-center absolute l-0 t-0 w-full h-full z-10 pb-10"
-      >
         <div class="flex flex-col justify-center gap-2">
           <GeneralLoader size="xlarge" />
           <span class="text-center" v-html="loaderText"></span>
@@ -1793,7 +1774,7 @@ onKeyStroke('ArrowDown', onDown)
       :extra-style="paginationStyleRef?.extraStyle"
     >
       <template #add-record>
-        <div v-if="isAddingEmptyRowAllowed" class="flex ml-1">
+        <div v-if="isAddingEmptyRowAllowed && !showSkeleton && !isPaginationLoading" class="flex ml-1">
           <NcButton
             v-if="isMobileMode"
             v-e="[isAddNewRecordGridMode ? 'c:row:add:grid' : 'c:row:add:form']"

packages/nc-gui/composables/useTableNew.ts

@@ -1,5 +1,7 @@
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
+import type { SidebarTableNode } from '~/lib'
+
 import {
   Modal,
   SYSTEM_COLUMNS,
@@ -58,12 +60,7 @@ 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 (
+  const openTable = async (table: SidebarTableNode) => {
-    table: TableType & {
-      isMetaLoading?: boolean
-      isViewsLoading?: boolean
-    },
-  ) => {
     if (!table.base_id) return
 
     let base = bases.value.get(table.base_id)

packages/nc-gui/composables/useViewData.ts

@@ -190,6 +190,8 @@ export function useViewData(
 
     controller.value = CancelToken.source()
 
+    isPaginationLoading.value = true
+
     const response = !isPublic.value
       ? await api.dbViewRow.list(
           'noco',

packages/nc-gui/lib/types.ts

@@ -1,4 +1,4 @@
-import type { BaseType, ColumnType, FilterType, MetaType, PaginatedType, Roles, RolesObj, ViewTypes } from 'nocodb-sdk'
+import type { BaseType, ColumnType, FilterType, MetaType, PaginatedType, Roles, RolesObj, TableType, ViewTypes } from 'nocodb-sdk'
 import type { I18n } from 'vue-i18n'
 import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
 import type { UploadFile } from 'ant-design-vue'
@@ -171,6 +171,11 @@ type ViewPageType = 'view' | 'webhook' | 'api' | 'field' | 'relation'
 
 type NcButtonSize = 'xxsmall' | 'xsmall' | 'small' | 'medium'
 
+interface SidebarTableNode extends TableType {
+  isMetaLoading?: boolean
+  isViewsLoading?: boolean
+}
+
 export {
   User,
   ProjectMetaInfo,
@@ -195,4 +200,5 @@ export {
   Users,
   ViewPageType,
   NcButtonSize,
+  SidebarTableNode,
 }

packages/nc-gui/store/tables.ts

@@ -1,6 +1,7 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import type { TableType } from 'nocodb-sdk'
 import { useTitle } from '@vueuse/core'
+import type { SidebarTableNode } from '~/lib'
 
 export const useTablesStore = defineStore('tablesStore', () => {
   const { includeM2M, ncNavigateTo } = useGlobal()
@@ -12,7 +13,7 @@ export const useTablesStore = defineStore('tablesStore', () => {
   const router = useRouter()
   const route = router.currentRoute
 
-  const baseTables = ref<Map<string, TableType[]>>(new Map())
+  const baseTables = ref<Map<string, SidebarTableNode[]>>(new Map())
   const basesStore = useBases()
   // const baseStore = useBase()
 

packages/nc-gui/store/views.ts

@@ -184,9 +184,13 @@ export const useViewsStore = defineStore('viewsStore', () => {
       isViewDataLoading.value = true
 
       try {
+        if (tablesStore.activeTable) tablesStore.activeTable.isViewsLoading = true
+
         await loadViews()
       } catch (e) {
         console.error(e)
+      } finally {
+        if (tablesStore.activeTable) tablesStore.activeTable.isViewsLoading = false
       }
     },
     { immediate: true },
@@ -271,10 +275,6 @@ export const useViewsStore = defineStore('viewsStore', () => {
     }
   }
 
-  watch(activeViewTitleOrId, () => {
-    isPaginationLoading.value = true
-  })
-
   watch(activeView, (view) => {
     if (!view) return
     if (!view.base_id) return