From 30440d94d9c823df9d6a10b5083668c511e508bb Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 19 Sep 2022 18:05:06 +0530
Subject: [PATCH 1/8] fix(gui): get table meta only after loading project table
 list

re #3702

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/composables/useProject.ts      |  8 ++++++++
 .../index/[type]/[title]/[[viewTitle]].vue     | 18 ++++++++++--------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index f5b728d4f0..c412e25f8c 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -42,6 +42,8 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
 
   const projectId = computed(() => (_projectId ? unref(_projectId) : (route.params.projectId as string)))
 
+  const projectAndTablesLoaded = ref(false)
+
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
 
@@ -93,6 +95,7 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
   }
 
   async function loadTables() {
+    projectAndTablesLoaded.value = false
     if (project.value.id) {
       const tablesResponse = await api.dbTable.list(project.value.id, {
         includeM2M: includeM2M.value,
@@ -100,9 +103,11 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
 
       if (tablesResponse.list) tables.value = tablesResponse.list
     }
+    projectAndTablesLoaded.value = true
   }
 
   async function loadProject(id?: string) {
+    projectAndTablesLoaded.value = false
     if (id) {
       project.value = await api.project.read(projectId.value)
     } else if (projectType === 'base') {
@@ -128,6 +133,8 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     setTheme(projectMeta.value?.theme)
 
     projectLoadedHook.trigger(project.value)
+
+    projectAndTablesLoaded.value = true
   }
 
   async function updateProject(data: Partial<ProjectType>) {
@@ -196,6 +203,7 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     projectLoadedHook: projectLoadedHook.on,
     reset,
     isLoading,
+    projectAndTablesLoaded,
   }
 }, 'useProject')
 
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
index a6c85c05bd..18b4da43fe 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
@@ -4,7 +4,7 @@ import { TabMetaInj } from '#imports'
 
 const { getMeta } = useMetas()
 
-const { project, projectLoadedHook } = useProject()
+const { project, projectLoadedHook, projectAndTablesLoaded } = useProject()
 
 const route = useRoute()
 
@@ -15,14 +15,16 @@ const activeTab = inject(
   computed(() => ({} as TabItem)),
 )
 
-if (!project.value.id) {
-  projectLoadedHook(async () => {
-    await getMeta(route.params.title as string, true)
+/** wait until project and table loads since meta load requires table list **/
+watch(
+  projectAndTablesLoaded,
+  (nextVal) => {
+    if (!nextVal) return
+    getMeta(route.params.title as string, true).finally(() => (loading.value = false))
     loading.value = false
-  })
-} else {
-  getMeta(route.params.title as string, true).finally(() => (loading.value = false))
-}
+  },
+  { immediate: true },
+)
 </script>
 
 <template>

From 6543b874293be465b735ca67ab3f793985a0ce46 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 20 Sep 2022 12:06:31 +0530
Subject: [PATCH 2/8] refactor(gui): use table list to verify tables loaded
 successfully

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/composables/useProject.ts                 | 8 --------
 .../index/index/[type]/[title]/[[viewTitle]].vue          | 7 ++++---
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/composables/useProject.ts b/packages/nc-gui/composables/useProject.ts
index c412e25f8c..f5b728d4f0 100644
--- a/packages/nc-gui/composables/useProject.ts
+++ b/packages/nc-gui/composables/useProject.ts
@@ -42,8 +42,6 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
 
   const projectId = computed(() => (_projectId ? unref(_projectId) : (route.params.projectId as string)))
 
-  const projectAndTablesLoaded = ref(false)
-
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
 
@@ -95,7 +93,6 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
   }
 
   async function loadTables() {
-    projectAndTablesLoaded.value = false
     if (project.value.id) {
       const tablesResponse = await api.dbTable.list(project.value.id, {
         includeM2M: includeM2M.value,
@@ -103,11 +100,9 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
 
       if (tablesResponse.list) tables.value = tablesResponse.list
     }
-    projectAndTablesLoaded.value = true
   }
 
   async function loadProject(id?: string) {
-    projectAndTablesLoaded.value = false
     if (id) {
       project.value = await api.project.read(projectId.value)
     } else if (projectType === 'base') {
@@ -133,8 +128,6 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     setTheme(projectMeta.value?.theme)
 
     projectLoadedHook.trigger(project.value)
-
-    projectAndTablesLoaded.value = true
   }
 
   async function updateProject(data: Partial<ProjectType>) {
@@ -203,7 +196,6 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     projectLoadedHook: projectLoadedHook.on,
     reset,
     isLoading,
-    projectAndTablesLoaded,
   }
 }, 'useProject')
 
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
index 18b4da43fe..bce21e4123 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
@@ -4,7 +4,7 @@ import { TabMetaInj } from '#imports'
 
 const { getMeta } = useMetas()
 
-const { project, projectLoadedHook, projectAndTablesLoaded } = useProject()
+const { tables } = useProject()
 
 const route = useRoute()
 
@@ -15,11 +15,12 @@ const activeTab = inject(
   computed(() => ({} as TabItem)),
 )
 
-/** wait until project and table loads since meta load requires table list **/
+/** wait until table list loads since meta load requires table list **/
 watch(
-  projectAndTablesLoaded,
+  () => tables.value.length,
   (nextVal) => {
     if (!nextVal) return
+
     getMeta(route.params.title as string, true).finally(() => (loading.value = false))
     loading.value = false
   },

From 7f8d641b5735151a7dcfd1a23acd6d014a8e4d00 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 20 Sep 2022 12:20:41 +0530
Subject: [PATCH 3/8] fix(nc-gui)/Added option for light background for  and
 enabled it for Grid

---
 packages/nc-gui/components/general/Overlay.vue | 5 ++++-
 packages/nc-gui/components/smartsheet/Grid.vue | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/general/Overlay.vue b/packages/nc-gui/components/general/Overlay.vue
index cebc59432e..da9ce2b175 100644
--- a/packages/nc-gui/components/general/Overlay.vue
+++ b/packages/nc-gui/components/general/Overlay.vue
@@ -11,6 +11,7 @@ interface Props {
   target?: TeleportProps['to']
   teleportDisabled?: TeleportProps['disabled']
   transition?: boolean
+  lightBackground?: boolean
 }
 
 interface Emits {
@@ -49,8 +50,10 @@ export default {
         vModel ? 'opacity-100' : 'opacity-0 pointer-events-none',
         inline ? 'absolute' : 'fixed',
         transition ? 'transition-opacity duration-200 ease-in-out' : '',
+        lightBackground ? 'bg-gray-100/25' : '',
+        !lightBackground ? 'bg-gray-700/75' : '',
       ]"
-      class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
+      class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-100/25"
     >
       <slot :is-open="vModel" />
     </div>
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 9cf501cd7b..6e5886c512 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -381,7 +381,7 @@ onBeforeUnmount(async () => {
 
 <template>
   <div class="flex flex-col h-full min-h-0 w-full">
-    <general-overlay :model-value="isLoading" inline transition>
+    <general-overlay :model-value="isLoading" inline transition light-background>
       <div class="flex items-center justify-center h-full w-full">
         <a-spin size="large" />
       </div>

From 030970bb66a24918c775181ae5fb6ba77d6c978c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 20 Sep 2022 14:56:21 +0530
Subject: [PATCH 4/8] fix(nc-gui)/Added classname prop for GeneralOverlay

---
 packages/nc-gui/components/general/Overlay.vue | 7 +++----
 packages/nc-gui/components/smartsheet/Grid.vue | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/general/Overlay.vue b/packages/nc-gui/components/general/Overlay.vue
index da9ce2b175..a40a0490e7 100644
--- a/packages/nc-gui/components/general/Overlay.vue
+++ b/packages/nc-gui/components/general/Overlay.vue
@@ -11,7 +11,7 @@ interface Props {
   target?: TeleportProps['to']
   teleportDisabled?: TeleportProps['disabled']
   transition?: boolean
-  lightBackground?: boolean
+  className?: string
 }
 
 interface Emits {
@@ -50,10 +50,9 @@ export default {
         vModel ? 'opacity-100' : 'opacity-0 pointer-events-none',
         inline ? 'absolute' : 'fixed',
         transition ? 'transition-opacity duration-200 ease-in-out' : '',
-        lightBackground ? 'bg-gray-100/25' : '',
-        !lightBackground ? 'bg-gray-700/75' : '',
+        className,
       ]"
-      class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-100/25"
+      class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
     >
       <slot :is-open="vModel" />
     </div>
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 6e5886c512..27f554ee11 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -381,7 +381,7 @@ onBeforeUnmount(async () => {
 
 <template>
   <div class="flex flex-col h-full min-h-0 w-full">
-    <general-overlay :model-value="isLoading" inline transition light-background>
+    <general-overlay :model-value="isLoading" inline transition class="!bg-gray-100/25">
       <div class="flex items-center justify-center h-full w-full">
         <a-spin size="large" />
       </div>

From 33a0de966c9a4360b4e4268ae17b48ddc7634e31 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 20 Sep 2022 14:58:47 +0530
Subject: [PATCH 5/8] fix(nc-gui)/Lowered opacity of GeneralOverlay in Grid

---
 packages/nc-gui/components/smartsheet/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 27f554ee11..515ce9ad41 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -381,7 +381,7 @@ onBeforeUnmount(async () => {
 
 <template>
   <div class="flex flex-col h-full min-h-0 w-full">
-    <general-overlay :model-value="isLoading" inline transition class="!bg-gray-100/25">
+    <general-overlay :model-value="isLoading" inline transition class="!bg-opacity-15">
       <div class="flex items-center justify-center h-full w-full">
         <a-spin size="large" />
       </div>

From 58df69ed9bb4bd77755fcbff2c8d602ad6a6eb6c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 20 Sep 2022 14:10:49 +0530
Subject: [PATCH 6/8] refactor(gui): use `watchOnce` to only listen once until
 loads tables

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../index/[type]/[title]/[[viewTitle]].vue    | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
index bce21e4123..8f6feb61b9 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
-import { TabMetaInj } from '#imports'
+import { TabMetaInj, watchOnce } from '#imports'
 
 const { getMeta } = useMetas()
 
@@ -15,17 +15,20 @@ const activeTab = inject(
   computed(() => ({} as TabItem)),
 )
 
-/** wait until table list loads since meta load requires table list **/
-watch(
-  () => tables.value.length,
-  (nextVal) => {
-    if (!nextVal) return
-
-    getMeta(route.params.title as string, true).finally(() => (loading.value = false))
-    loading.value = false
-  },
-  { immediate: true },
-)
+if (tables.value.length) {
+  getMeta(route.params.title as string, true).finally(() => (loading.value = false))
+  loading.value = false
+} else {
+  /** wait until table list loads since meta load requires table list **/
+  watchOnce(
+    () => tables.value.length,
+    (nextVal) => {
+      if (!nextVal) return
+      getMeta(route.params.title as string, true).finally(() => (loading.value = false))
+      loading.value = false
+    },
+  )
+}
 </script>
 
 <template>

From d25954055c623f51b0aa0235f7c3335f967d8e79 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 20 Sep 2022 15:19:41 +0530
Subject: [PATCH 7/8] refactor(gui): use `until` to only listen until loads
 tables

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../index/[type]/[title]/[[viewTitle]].vue    | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
index 8f6feb61b9..ed379566d3 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
-import { TabMetaInj, watchOnce } from '#imports'
+import { TabMetaInj, until } from '#imports'
 
 const { getMeta } = useMetas()
 
@@ -15,20 +15,12 @@ const activeTab = inject(
   computed(() => ({} as TabItem)),
 )
 
-if (tables.value.length) {
-  getMeta(route.params.title as string, true).finally(() => (loading.value = false))
-  loading.value = false
-} else {
-  /** wait until table list loads since meta load requires table list **/
-  watchOnce(
-    () => tables.value.length,
-    (nextVal) => {
-      if (!nextVal) return
-      getMeta(route.params.title as string, true).finally(() => (loading.value = false))
-      loading.value = false
-    },
-  )
-}
+/** wait until table list loads since meta load requires table list **/
+until(tables)
+  .toMatch((tables) => tables.length > 0)
+  .then(() => {
+    getMeta(route.params.title as string, true).finally(() => (loading.value = false))
+  })
 </script>
 
 <template>

From eb2d115c6c483320a97d075b57e6c8289bccb7aa Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 20 Sep 2022 15:31:30 +0530
Subject: [PATCH 8/8] fix(nc-gui)/Removed unnecassary prop from GeneralOverlay

---
 packages/nc-gui/components/general/Overlay.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/nc-gui/components/general/Overlay.vue b/packages/nc-gui/components/general/Overlay.vue
index a40a0490e7..cebc59432e 100644
--- a/packages/nc-gui/components/general/Overlay.vue
+++ b/packages/nc-gui/components/general/Overlay.vue
@@ -11,7 +11,6 @@ interface Props {
   target?: TeleportProps['to']
   teleportDisabled?: TeleportProps['disabled']
   transition?: boolean
-  className?: string
 }
 
 interface Emits {
@@ -50,7 +49,6 @@ export default {
         vModel ? 'opacity-100' : 'opacity-0 pointer-events-none',
         inline ? 'absolute' : 'fixed',
         transition ? 'transition-opacity duration-200 ease-in-out' : '',
-        className,
       ]"
       class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
     >