Fixed horrible loading pattern for calendar

components/calendar/Calendar.vue

@@ -8,11 +8,16 @@ import CenturyLayout from './state/centennially/Layout.vue'
 import DecadeLayout from './state/decennially/Layout.vue'
 import YearLayout from './state/yearly/Layout.vue'
 
-const route = useRoute()
-const id = route.params.id
-const calendarStore = useCalendar()
+import type { Calendar } from '~/models/CalendarConfig'
+import type { Category } from '~/models/Category'
 
-await calendarStore.fetchCalendar(Number(id))
+const props = defineProps<{
+  calendarData: Calendar,
+  categories: Category[]
+}>()
+
+const { setActiveCalendar } = useCalendar()
+setActiveCalendar(props.calendarData, props.categories)
 
 const { currentConfig, jumpToDate, selectedDate } = useCalendar()
 

nuxt.config.ts

@@ -28,8 +28,5 @@ export default defineNuxtConfig({
     preference: 'dark',
     fallback: 'dark',
   },
-  supabase: {
-    redirect: false
-  },
   eslint: {}
 })

pages/i/calendar/[id].vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { PhCircleNotch } from '@phosphor-icons/vue';
+import type { Calendar } from '~/models/CalendarConfig';
+import type { Category } from '~/models/Category';
 
 useHead({
   title: 'Calendrier'
@@ -15,11 +17,32 @@ watch(user, (n, _o) => {
     navigateTo('/')
   }
 })
+
+const route = useRoute()
+const id = route.params.id
+
+const { data: calendarData, pending: calPending } = useLazyFetch('/api/calendars/query', { query: { id, full: true } })
+const { data: catData, pending: catPending } = useLazyFetch('/api/calendars/categories/query')
+
+const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
+const categories = computed<Category[]>(() => catData?.value?.data as Category[])
 </script>
 
 <template>
-  <Suspense>
-    <LazyCalendar />
+  <div v-if="calPending || catPending" 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>
+
+  <Calendar v-else-if="cal && categories" :calendar-data="cal" :categories />
+
+  <!-- <span v-if="calendarData && categories">
+    <Calendar :calendar-data :categories />
+  </span> -->
+  <!-- <Suspense>
+    <Calendar :calendar="calendar?.data" :categories />
 
     <template #fallback>
       <div class="h-full w-full grid place-items-center">
@@ -29,5 +52,5 @@ watch(user, (n, _o) => {
         </div>
       </div>
     </template>
-  </Suspense>
+  </Suspense> -->
 </template>

pages/i/world/[id].vue

@@ -5,7 +5,7 @@ import type { World } from '~/models/World';
 const route = useRoute()
 const id = route.params.id
 
-const { data: res, pending } = await useFetch(`/api/worlds/query`, { query: { id, full: true } })
+const { data: res, pending } = await useFetch('/api/worlds/query', { query: { id, full: true } })
 
 const world = res.value?.data as World
 

server/api/calendars/query.get.ts

@@ -46,7 +46,7 @@ export default defineEventHandler(async (event) => {
   }
 
   if (query.id) {
-    return output.eq('id', query.id).single<Calendar>()
+    return output.eq('id', query.id).limit(1).single<Calendar>()
   }
 
   return output.returns<Calendar[]>()

stores/CalendarStore.ts

@@ -1,6 +1,6 @@
-import {
-  type RPGDate,
-  type RPGDateOrder,
+import type {
+  RPGDate,
+  RPGDateOrder,
 } from '@/models/Date'
 import { useUrlSearchParams } from '@vueuse/core'
 import { defineStore } from 'pinia'
@@ -25,10 +25,6 @@ type CalendarCurrentDate = {
 }
 
 export const useCalendar = defineStore('calendar', () => {
-  const params = useUrlSearchParams('history', {
-    write: false
-  })
-
   /**
    * Static calendar config
    */
@@ -47,14 +43,8 @@ export const useCalendar = defineStore('calendar', () => {
    */
   const months = ref<CalendarMonth[]>([])
 
-  async function fetchCalendar(id: number) {
+  function setActiveCalendar(calendarData: Calendar, categoryData: Category[]) {
     try {
-      const res = await $fetch('/api/calendars/query', { query: { id, full: true } })
-      const categoryRes = await $fetch('/api/calendars/categories/query')
-
-      const calendarData = res.data as Calendar
-      const categoryData = categoryRes.data as Category[]
-
       if (!calendarData.id) return
 
       activeCalendar.value = {
@@ -85,6 +75,10 @@ export const useCalendar = defineStore('calendar', () => {
     }
   }
 
+  const params = useUrlSearchParams('history', {
+    write: false
+  })
+
   /**
    * Sorted month data using the raw months
    */
@@ -873,7 +867,7 @@ export const useCalendar = defineStore('calendar', () => {
   }
 
   return {
-    fetchCalendar,
+    setActiveCalendar,
     activeCalendar,
     months,
     sortedMonths,