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

Added loading card component

Browse Source
This commit is contained in:
Alexis
2025-03-14 17:45:09 +01:00
parent 586adee6a9
commit 5b38b3d0fa
6 changed files with 46 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/calendar/Calendar.vue
View File

@@ -51,9 +51,9 @@ onMounted(() => {
<component :is="currentViewComponent" /> <component :is="currentViewComponent" />
<CalendarSearch /> <LazyCalendarSearch />
<CalendarDialogUpdateEvent v-if="!isReadOnly" /> <LazyCalendarDialogUpdateEvent v-if="!isReadOnly" />
<CalendarDialogDeleteEvent v-if="!isReadOnly" /> <LazyCalendarDialogDeleteEvent v-if="!isReadOnly" />
</div> </div>
</div> </div>
</template> </template>

21
components/global/LoadingCard.vue Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts" setup>
const { lineNb = 3 } = defineProps<{
lineNb?: number
}>()
</script>
<template>
<UiCard class="w-full h-full flex flex-col">
<UiCardHeader>
<UiCardTitle>
<UiSkeleton class="w-2/3 max-w-full h-8" />
</UiCardTitle>
</UiCardHeader>
<UiCardContent class="grow grid gap-2">
<UiSkeleton class="w-full max-w-full h-6" />
<template v-for="(l, i) in lineNb" :key="i">
<UiSkeleton class="max-w-full h-6" :style="`width: ${Math.floor(Math.random() * 100) + 1}%`" />
</template>
</UiCardContent>
</UiCard>
</template>

8
pages/calendars/[id].vue
View File

@@ -68,21 +68,21 @@ watch(user, () => {
<div class="grid justify-items-center opacity-80"> <div class="grid justify-items-center opacity-80">
<PhCalendarX size="75" class="opacity-60" /> <PhCalendarX size="75" class="opacity-60" />
<Heading level="h1"> <LazyHeading level="h1">
{{ $t("entity.calendar.notFound") }} {{ $t("entity.calendar.notFound") }}
</Heading> </LazyHeading>
<p> <p>
{{ $t('entity.calendar.notFoundDescription') }} {{ $t('entity.calendar.notFoundDescription') }}
</p> </p>
<UiButton variant="default" class="mt-4 gap-2" as-child> <LazyUiButton variant="default" class="mt-4 gap-2" as-child>
<RouterLink to="/explore"> <RouterLink to="/explore">
<PhArrowBendDoubleUpLeft size="24" /> <PhArrowBendDoubleUpLeft size="24" />
{{ $t('entity.calendar.backToList') }} {{ $t('entity.calendar.backToList') }}
</RouterLink> </RouterLink>
</UiButton> </LazyUiButton>
</div> </div>
</div> </div>
</template> </template>

17
pages/explore.vue
View File

@@ -5,7 +5,9 @@ definePageMeta({
middleware: ["reset-menu"] middleware: ["reset-menu"]
}) })
const { data: availableCalendars } = await useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars", query: { full: true } }) const { data: availableCalendars, status: calendarStatus } = await useLazyFetch<{ data: Calendar[] }>("/api/calendars/query", { key: "explore-calendars", query: { full: true } })
const isLoading = computed(() => calendarStatus.value === "pending")
</script> </script>
<template> <template>
@@ -24,11 +26,14 @@ const { data: availableCalendars } = await useLazyFetch<{ data: Calendar[] }>("/
{{ $t("entity.calendar.namePublicPlural") }} {{ $t("entity.calendar.namePublicPlural") }}
</Heading> </Heading>
<ul v-if="availableCalendars?.data" class="grid md:grid-cols-3 gap-2"> <div v-if="isLoading" class="grid md:grid-cols-3 gap-2">
<li v-for="calendar in availableCalendars.data" :key="calendar.shortId"> <LoadingCard />
<CalendarPreviewCard :calendar="calendar" :gm-id="calendar.world?.gmId" /> </div>
</li> <ul v-else-if="availableCalendars?.data" class="grid md:grid-cols-3 gap-2">
</ul> <li v-for="calendar in availableCalendars.data" :key="calendar.shortId">
<CalendarPreviewCard :calendar="calendar" :gm-id="calendar.world?.gmId" />
</li>
</ul>
</Spacing> </Spacing>
</Spacing> </Spacing>
</main> </main>

6
pages/my/index.vue
View File

@@ -153,8 +153,8 @@ function hideEditModal() {
</Spacing> </Spacing>
</section> </section>
<WorldDialogCreate :modal-state="isCreateWorldModalOpen" @on-close="hideCreateDialog" /> <LazyWorldDialogCreate :modal-state="isCreateWorldModalOpen" @on-close="hideCreateDialog" />
<WorldDialogEdit :world="markedWorld" :modal-state="isEditWorldModalOpen" @on-close="hideEditModal" /> <LazyWorldDialogEdit :world="markedWorld" :modal-state="isEditWorldModalOpen" @on-close="hideEditModal" />
<WorldDialogDelete :world="markedWorld" :modal-state="isDeleteWorldModalOpen" @on-close="hideDeleteModal" /> <LazyWorldDialogDelete :world="markedWorld" :modal-state="isDeleteWorldModalOpen" @on-close="hideDeleteModal" />
</main> </main>
</template> </template>

8
pages/my/worlds/[id].vue
View File

@@ -251,10 +251,10 @@ function hideEditModal() {
</Spacing> </Spacing>
</section> </section>
<WorldDialogEdit :world="world.data" :modal-state="isEditWorldModalOpen" @on-close="hideEditModal" /> <LazyWorldDialogEdit :world="world.data" :modal-state="isEditWorldModalOpen" @on-close="hideEditModal" />
<CalendarDialogCreate :world="world.data" :modal-state="isCreateCalendarModalOpen" @on-close="hideCreateDialog" /> <LazyCalendarDialogCreate :world="world.data" :modal-state="isCreateCalendarModalOpen" @on-close="hideCreateDialog" />
<CalendarDialogUpdate v-if="markedCalendar?.id" :world="world.data" :calendar="markedCalendar" :modal-state="isUpdateCalendarModalOpen" @on-close="hideUpdateDialog" /> <LazyCalendarDialogUpdate v-if="markedCalendar?.id" :world="world.data" :calendar="markedCalendar" :modal-state="isUpdateCalendarModalOpen" @on-close="hideUpdateDialog" />
<CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteCalendarModalOpen" @on-close="hideDeleteCalendarModal"/> <LazyCalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteCalendarModalOpen" @on-close="hideDeleteCalendarModal"/>
</template> </template>
<template v-else> <template v-else>
<div class="h-full w-full grid place-items-center"> <div class="h-full w-full grid place-items-center">