From 4c6d9b623126b7e65adf7be94269e1fafba52d6f Mon Sep 17 00:00:00 2001
From: qwerzl <me@qwerzl.me>
Date: Thu, 19 Dec 2024 08:36:48 +0800
Subject: [PATCH] fix(loading): update logic for displaying the loading page

---
 .changeset/modern-files-juggle.md |  5 +++++
 app.vue                           | 25 +++++++++++++------------
 components/custom/sidebar.vue     | 11 +++++++----
 3 files changed, 25 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/modern-files-juggle.md

diff --git a/.changeset/modern-files-juggle.md b/.changeset/modern-files-juggle.md
new file mode 100644
index 00000000..df8529f7
--- /dev/null
+++ b/.changeset/modern-files-juggle.md
@@ -0,0 +1,5 @@
+---
+"enspire": patch
+---
+
+Bug fix: Updated logic for displaying the loading page
diff --git a/app.vue b/app.vue
index efea588e..c24669dc 100644
--- a/app.vue
+++ b/app.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { ConfigProvider } from 'radix-vue'
-import { ClerkLoaded, ClerkLoading } from 'vue-clerk'
-import { IndefiniteProgressBar } from '~/components/ui/indefinite-progress-bar'
+import { useClerkProvider } from 'vue-clerk'
 import '@unocss/reset/tailwind-compat.css'
 
+const { isClerkLoaded } = useClerkProvider()
+
 const useIdFunction = () => useId()
 
+const isEnspireLoading = useState('isEnspireLoading', () => false)
+
 useHead({
   meta: [
     { name: 'theme-color', media: '(prefers-color-scheme: light)', content: 'white' },
@@ -18,19 +21,17 @@ useHead({
   <ConfigProvider :use-id="useIdFunction">
     <NuxtLoadingIndicator />
     <VitePwaManifest />
-    <ClerkLoading>
-      <div class="absolute z-100 h-screen w-screen bg-background">
-        <div class="h-full w-full flex flex-col items-center justify-center space-y-6">
-          <div class="flex justify-center space-x-1">
-            <SvgoLogo class="pt-1 text-7xl hover:animate-spin" />
-            <div class="mt-1 text-6xl tracking-tight">
-              enspire
-            </div>
+    <div v-if="!isClerkLoaded || isEnspireLoading" class="absolute z-100 h-screen w-screen bg-background">
+      <div class="h-full w-full flex flex-col items-center justify-center space-y-6">
+        <div class="flex justify-center space-x-1">
+          <SvgoLogo class="pt-1 text-7xl hover:animate-spin" />
+          <div class="mt-1 text-6xl tracking-tight">
+            enspire
           </div>
-          <Icon name="svg-spinners:3-dots-fade" size="2em" />
         </div>
+        <Icon name="svg-spinners:3-dots-fade" size="2em" />
       </div>
-    </ClerkLoading>
+    </div>
     <NuxtLayout class="z-10">
       <NuxtPage />
     </NuxtLayout>
diff --git a/components/custom/sidebar.vue b/components/custom/sidebar.vue
index 54eabfc3..780f1c3a 100644
--- a/components/custom/sidebar.vue
+++ b/components/custom/sidebar.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
+import type { AllClubs } from '~/types/api/user/all_clubs'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 import { useClerk } from 'vue-clerk'
-import type { AllClubs } from '~/types/api/user/all_clubs'
 
 const clerk = useClerk()
-
 const route = useRoute()
 
 const isPresidentOrVicePresident = ref(false)
+useState('isEnspireLoading').value = true
 
 if (import.meta.client) {
   if (clerk.user?.publicMetadata.binded) {
@@ -16,8 +16,11 @@ if (import.meta.client) {
       headers: useRequestHeaders(),
       method: 'GET',
     })
-    if (clubs && (clubs.president.length !== 0 || clubs.vice.length !== 0)) {
-      isPresidentOrVicePresident.value = true
+    if (clubs) {
+      useState('isEnspireLoading').value = false
+      if (clubs.president.length !== 0 || clubs.vice.length !== 0) {
+        isPresidentOrVicePresident.value = true
+      }
     }
   }
 }