From 693f50661024332c679c09c37cae4368a1b712bb Mon Sep 17 00:00:00 2001
From: Alexis <alexis.pele@pm.me>
Date: Sun, 27 Jul 2025 18:57:31 +0200
Subject: [PATCH] Reworked data fetching for explore page

---
 app/pages/explore.vue | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/app/pages/explore.vue b/app/pages/explore.vue
index 732c470..29a1d42 100644
--- a/app/pages/explore.vue
+++ b/app/pages/explore.vue
@@ -5,9 +5,10 @@ definePageMeta({
   middleware: ["reset-menu"]
 })
 
-const { data: availableCalendars, status: calendarStatus } = useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars", query: { full: true } })
-
-const isLoading = computed(() => calendarStatus.value === "pending")
+// const { data: availableCalendars, status: calendarStatus } = useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars", query: { full: true } })
+const { data: calendars, status } = useLazyAsyncData<{ data: Calendar[] }>("explore-calendars", () => {
+  return $fetch("/api/calendars/query", { query: { full: true }})
+})
 </script>
 
 <template>
@@ -32,14 +33,17 @@ const isLoading = computed(() => calendarStatus.value === "pending")
           {{ $t("entity.calendar.namePublicPlural") }}
         </Heading>
 
-          <div v-if="isLoading" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
-            <LoadingCard />
+          <div v-if="status === 'pending'" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
+            <LazyLoadingCard />
           </div>
-          <ul v-else-if="availableCalendars?.data" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
-            <li v-for="calendar in availableCalendars.data" :key="calendar.shortId">
-              <CalendarPreviewCard :calendar="calendar" :gm-id="calendar.world?.gmId" />
-            </li>
-          </ul>
+
+          <template v-else-if="status === 'success' && calendars?.data">
+            <ul class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
+              <li v-for="calendar in calendars.data" :key="calendar.shortId">
+                <LazyCalendarPreviewCard :calendar="calendar" :gm-id="calendar.world?.gmId" />
+              </li>
+            </ul>
+          </template>
       </Spacing>
     </Spacing>
   </main>