add skeleton loader for events

Author: MalteSchwitters

frontend/src/ui/assets/css/domain/event.css

@@ -36,6 +36,15 @@
     @apply text-blue-900;
 }
 
+.event-card.loading {
+    @apply hover:shadow-none;
+    @apply cursor-default;
+}
+
+.event-card.loading > * {
+    @apply bg-primary-100 bg-opacity-75;
+}
+
 .event-card.assigned {
     @apply border border-green-200;
 }

frontend/src/ui/views/home/EventCard.vue

@@ -1,5 +1,6 @@
 <template>
     <RouterLink
+        v-if="props.event"
         :to="{ name: Routes.EventDetails, params: { year: props.event.start.getFullYear(), key: props.event.key } }"
         class="block hover:no-underline"
     >
@@ -50,6 +51,32 @@
             </div>
         </div>
     </RouterLink>
+    <div v-else class="event-card loading animate-pulse">
+        <div class="flex">
+            <div
+                class="border-event-card -my-2 -ml-2 hidden w-32 flex-col items-center justify-center border-r sm:flex"
+            >
+                <span class="mb-2 inline-block h-8 w-12 rounded-lg bg-primary-200"></span>
+                <span class="mb-2 inline-block h-4 w-16 rounded-lg bg-primary-200"></span>
+            </div>
+            <div class="flex flex-grow flex-col px-4 py-3 sm:px-8">
+                <h3 class="mb-2 flex items-center space-x-2">
+                    <span class="mb-2 inline-block h-4 w-64 rounded-lg bg-primary-200"></span>
+                </h3>
+                <p class="mb-4 flex text-sm">
+                    <span class="mb-2 inline-block h-3 w-40 rounded-lg bg-primary-200"></span>
+                    <span class="flex-grow"></span>
+                    <span class="mb-2 inline-block h-3 w-12 rounded-lg bg-primary-200"></span>
+                </p>
+                <div class="flex flex-col flex-wrap justify-between">
+                    <div v-for="i in 3" :key="i" class="flex items-center space-x-2">
+                        <span class="my-1 inline-block h-4 w-4 rounded-full bg-primary-200"></span>
+                        <span class="my-1 inline-block h-3 w-32 rounded-lg bg-primary-200"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 <script lang="ts" setup>
 import { DateTimeFormat } from '@/common/date';
@@ -59,7 +86,7 @@ import { formatDateRange } from '@/ui/composables/DateRangeFormatter';
 import { Routes } from '@/ui/views/Routes';
 
 interface Props {
-    event: Event;
+    event?: Event;
 }
 
 const props = defineProps<Props>();

frontend/src/ui/views/home/HomeView.vue

@@ -5,7 +5,19 @@
                 <div
                     class="sticky top-12 z-10 -mx-4 flex h-14 justify-end bg-primary-50 pb-2 pt-4 xl:top-0 xl:h-16 xl:pt-8"
                 ></div>
-                <div v-if="events.length === 0" class="-mx-4 rounded-2xl bg-primary-100 p-4">
+                <div v-if="loading" class="-mt-10">
+                    <div class="pb-8">
+                        <div class="pointer-events-none sticky top-16 z-10 flex pb-1 pt-2 xl:top-8">
+                            <h2 class="inline-block text-primary-800 text-opacity-50">Reisen werden geladen...</h2>
+                        </div>
+                        <ul class="-mx-4 max-w-xl">
+                            <li v-for="i in 3" :key="i" class="mt-4">
+                                <EventCard />
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div v-else-if="events.length === 0" class="-mx-4 rounded-2xl bg-primary-100 p-4">
                     <h3 class="mb-2">Keine zukünftigen Reisen</h3>
                     <p>Du hast dich bisher noch für keine Reise angemeldet</p>
                 </div>
@@ -64,6 +76,7 @@ const i18n = useI18n();
 const user = authUseCase.getSignedInUser();
 
 const events = ref<Event[]>([]);
+const loading = ref<boolean>(true);
 const searchterm = ref<string>('');
 
 const filteredEvents = computed<Event[]>(() =>
@@ -108,6 +121,7 @@ function init(): void {
 
 async function fetchEvents(): Promise<void> {
     events.value = await eventUseCase.getFutureEventsByUser(user.key);
+    loading.value = false;
 }
 
 init();