Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made about page more reactive

Browse Source
This commit is contained in:
Alexis
2025-07-27 18:17:13 +02:00
parent 6b02629b01
commit f2076e413c
4 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/pages/about.vue
View File

@@ -1,7 +1,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { PhCircleNotch } from '@phosphor-icons/vue'
const { locale } = useI18n() 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() return queryCollection("sections").path(`/sections/${locale.value}/legal`).first()
}) })
@@ -9,25 +11,25 @@ watch(locale, () => refresh())
</script> </script>
<template> <template>
<main class="py-8 px-5 md:px-8 overflow-y-auto"> <Head>
<Head> <Title>{{ $t("pages.about.title") }}</Title>
<Title>{{ $t("pages.about.title") }}</Title> </Head>
</Head>
<div class="container max-md:px-0"> <main class="container overflow-y-auto py-8 px-5 md:px-8 grid gap-4 grid-rows-[auto_1fr]">
<Spacing size="lg"> <div class="flex items-center gap-3">
<div class="flex items-center gap-3"> <div class="md:hidden">
<div class="md:hidden"> <SidebarToggle />
<SidebarToggle /> </div>
</div>
<Heading level="h1"> <Heading level="h1">
{{ $t("pages.about.title") }} {{ $t("pages.about.title") }}
</Heading> </Heading>
</div>
<ContentRenderer v-if="page" :value="page" class="content" />
</Spacing>
</div> </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> </main>
</template> </template>

2
app/pages/calendars/[id].vue
View File

@@ -44,7 +44,7 @@ watch(isLoading, (n) => {
<p> <p>
{{ $t('entity.calendar.isLoading') }} {{ $t('entity.calendar.isLoading') }}
</p> </p>
<PhCircleNotch size="50" class="animate-spin"/> <PhCircleNotch size="50" class="opacity-33 animate-spin"/>
</div> </div>
</div> </div>

2
app/pages/explore.vue
View File

@@ -5,7 +5,7 @@ definePageMeta({
middleware: ["reset-menu"] 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") const isLoading = computed(() => calendarStatus.value === "pending")
</script> </script>

2
app/pages/my/calendars/[id].vue
View File

@@ -51,7 +51,7 @@ watch([calendar], () => {
<p> <p>
{{ $t('entity.calendar.isLoading') }} {{ $t('entity.calendar.isLoading') }}
</p> </p>
<PhCircleNotch size="50" class="animate-spin"/> <PhCircleNotch size="50" class="opacity-33 animate-spin"/>
</div> </div>
</div> </div>