From f2076e413cbac4163d66e0ad943e346d6b6d1943 Mon Sep 17 00:00:00 2001
From: Alexis <alexis.pele@pm.me>
Date: Sun, 27 Jul 2025 18:17:13 +0200
Subject: [PATCH] Made about page more reactive

---
 app/pages/about.vue             | 38 +++++++++++++++++----------------
 app/pages/calendars/[id].vue    |  2 +-
 app/pages/explore.vue           |  2 +-
 app/pages/my/calendars/[id].vue |  2 +-
 4 files changed, 23 insertions(+), 21 deletions(-)
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 7d3e132..8e48de9 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import { PhCircleNotch } from '@phosphor-icons/vue'
+
 const { locale } = useI18n()
 
-const { data: page, refresh } = await useAsyncData(`about-content-${locale}`, () => {
+const { data: page, refresh, status } = useLazyAsyncData(`about-content-${locale}`, () => {
   return queryCollection("sections").path(`/sections/${locale.value}/legal`).first()
 })
 
@@ -9,25 +11,25 @@ watch(locale, () => refresh())
 </script>
 
 <template>
-  <main class="py-8 px-5 md:px-8 overflow-y-auto">
-    <Head>
-      <Title>{{ $t("pages.about.title") }}</Title>
-    </Head>
+  <Head>
+    <Title>{{ $t("pages.about.title") }}</Title>
+  </Head>
 
-    <div class="container max-md:px-0">
-      <Spacing size="lg">
-        <div class="flex items-center gap-3">
-          <div class="md:hidden">
-            <SidebarToggle />
-          </div>
+  <main class="container overflow-y-auto py-8 px-5 md:px-8 grid gap-4 grid-rows-[auto_1fr]">
+    <div class="flex items-center gap-3">
+      <div class="md:hidden">
+        <SidebarToggle />
+      </div>
 
-          <Heading level="h1">
-            {{ $t("pages.about.title") }}
-          </Heading>
-        </div>
-
-        <ContentRenderer v-if="page" :value="page" class="content" />
-      </Spacing>
+      <Heading level="h1">
+        {{ $t("pages.about.title") }}
+      </Heading>
     </div>
+
+    <div v-if="status === 'pending'" class="grid place-items-center">
+      <PhCircleNotch size="50" class="opacity-33 animate-spin"/>
+    </div>
+
+    <LazyContentRenderer v-else-if="status === 'success' && page" :value="page" class="content" />
   </main>
 </template>
diff --git a/app/pages/calendars/[id].vue b/app/pages/calendars/[id].vue
index 137712a..86a9b33 100644
--- a/app/pages/calendars/[id].vue
+++ b/app/pages/calendars/[id].vue
@@ -44,7 +44,7 @@ watch(isLoading, (n) => {
       <p>
         {{ $t('entity.calendar.isLoading') }}
       </p>
-      <PhCircleNotch size="50" class="animate-spin"/>
+      <PhCircleNotch size="50" class="opacity-33 animate-spin"/>
     </div>
   </div>
 
diff --git a/app/pages/explore.vue b/app/pages/explore.vue
index 7475b01..732c470 100644
--- a/app/pages/explore.vue
+++ b/app/pages/explore.vue
@@ -5,7 +5,7 @@ definePageMeta({
   middleware: ["reset-menu"]
 })
 
-const { data: availableCalendars, status: calendarStatus } = await useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars", query: { full: true } })
+const { data: availableCalendars, status: calendarStatus } = useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars", query: { full: true } })
 
 const isLoading = computed(() => calendarStatus.value === "pending")
 </script>
diff --git a/app/pages/my/calendars/[id].vue b/app/pages/my/calendars/[id].vue
index 39dffda..b7ce3ff 100644
--- a/app/pages/my/calendars/[id].vue
+++ b/app/pages/my/calendars/[id].vue
@@ -51,7 +51,7 @@ watch([calendar], () => {
       <p>
         {{ $t('entity.calendar.isLoading') }}
       </p>
-      <PhCircleNotch size="50" class="animate-spin"/>
+      <PhCircleNotch size="50" class="opacity-33 animate-spin"/>
     </div>
   </div>
 
