From 6338f0e25601ccc9839519071a393fb407743d03 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 2 Mar 2024 07:32:42 +0000
Subject: [PATCH] fix(nc-gui): add loader in all tables tab

---
 .../dashboard/TreeView/ProjectNode.vue        |  2 ++
 .../nc-gui/components/project/AllTables.vue   | 20 +++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 1f14ae556e..2acb07fa85 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -284,6 +284,8 @@ const onProjectClick = async (base: NcProject, ignoreNavigation?: boolean, toggl
   }
 
   if (!isProjectPopulated) {
+    base.isLoading = false
+
     const updatedProject = bases.value.get(base.id!)!
     updatedProject.isLoading = false
   }
diff --git a/packages/nc-gui/components/project/AllTables.vue b/packages/nc-gui/components/project/AllTables.vue
index ede8189adf..8c5f14d388 100644
--- a/packages/nc-gui/components/project/AllTables.vue
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -7,6 +7,8 @@ const { activeTables } = storeToRefs(useTablesStore())
 const { openTable } = useTablesStore()
 const { openedProject } = storeToRefs(useBases())
 
+const { base } = useBase()
+
 const isNewBaseModalOpen = ref(false)
 
 const isDataSourceLimitReached = computed(() => Number(openedProject.value?.sources?.length) > 1)
@@ -78,7 +80,7 @@ const onCreateBaseClick = () => {
 
 <template>
   <div class="nc-all-tables-view">
-    <div class="flex flex-row gap-x-6 pb-3 pt-6">
+    <div class="flex flex-row gap-x-6 pb-3 pt-6" :class="base?.isLoading ? 'pointer-events-none' : ''">
       <div
         v-if="isUIAllowed('tableCreate')"
         role="button"
@@ -121,7 +123,21 @@ const onCreateBaseClick = () => {
         </div>
       </component>
     </div>
-    <template v-if="activeTables.length">
+    <div
+      v-if="base?.isLoading"
+      class="flex items-center justify-center text-center"
+      :style="{
+        height: 'calc(100vh - var(--topbar-height) - 18rem)',
+      }"
+    >
+      <div>
+        <GeneralLoader size="xlarge" />
+        <div class="mt-2">
+          {{ $t('general.loading') }}
+        </div>
+      </div>
+    </div>
+    <template v-else-if="activeTables.length">
       <div class="flex flex-row w-full text-gray-400 border-b-1 border-gray-50 py-3 px-2.5">
         <div class="w-2/5">{{ $t('objects.table') }}</div>
         <div class="w-1/5">{{ $t('general.source') }}</div>