fix(loading): update logic for displaying the loading page

Author: qwerzl

.changeset/modern-files-juggle.md

@@ -0,0 +1,5 @@
+---
+"enspire": patch
+---
+
+Bug fix: Updated logic for displaying the loading page

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>

components/custom/sidebar.vue

@@ -1,23 +1,26 @@
 <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) {
     const clubs = await $fetch<AllClubs>(`/api/user/all_clubs`, {
       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
+      }
     }
   }
 }