Changed loading and added spinner

pages/i/calendar/[id].vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { PhCircleNotch } from '@phosphor-icons/vue';
+
 useHead({
   title: 'Calendrier'
 })
@@ -13,14 +15,19 @@ watch(user, (n, _o) => {
     navigateTo('/')
   }
 })
-
-const route = useRoute()
-const id = route.params.id
-const calendarStore = useCalendar()
-
-await useAsyncData('calendar', async () => await calendarStore.fetchCalendar(Number(id)))
 </script>
 
 <template>
-  <LazyCalendar />
+  <Suspense>
+    <LazyCalendar />
+
+    <template #fallback>
+      <div class="h-full w-full grid place-items-center">
+        <div class="grid gap-2 justify-items-center opacity-50">
+          <p>Chargement du calendrier</p>
+          <PhCircleNotch size="50" class="animate-spin"/>
+        </div>
+      </div>
+    </template>
+  </Suspense>
 </template>