From 57e6835bd69f84b6822fb28983d2d2786cc99184 Mon Sep 17 00:00:00 2001
From: Casper Boone <mail@casperboone.nl>
Date: Sun, 12 Jan 2025 17:37:19 +0100
Subject: [PATCH] Add loading state to linked events

---
 .../components/pages/mixup/LinkedEvents.vue   | 22 ++++++++++++++++---
 dwhdelft.nl/pages/mixup.vue                   |  6 ++---
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/dwhdelft.nl/components/pages/mixup/LinkedEvents.vue b/dwhdelft.nl/components/pages/mixup/LinkedEvents.vue
index 672d385c..93c7d6e4 100644
--- a/dwhdelft.nl/components/pages/mixup/LinkedEvents.vue
+++ b/dwhdelft.nl/components/pages/mixup/LinkedEvents.vue
@@ -47,14 +47,29 @@ onMounted(() => {
 
 <template>
   <section
-    v-if="events && events.length > 0"
+    v-if="events === null || events.length > 0"
     class="bg-gray-900 bg-gradient-to-b from-gray-900 to-brand-500/10 py-12 text-gray-200 md:pt-0"
   >
     <ElementsContainer>
       <h1 class="mb-6 text-center text-5xl font-medium">
         <Markdown :content="t('events')" />
       </h1>
-      <div class="flex flex-wrap justify-center gap-4 md:text-center">
+      <div v-if="events === null" class="flex flex-wrap justify-center gap-4">
+        <div
+          v-for="index in 5"
+          :key="index"
+          class="flex w-full animate-pulse flex-row-reverse rounded-lg bg-brand-900 p-4 shadow-lg md:w-48 md:flex-col"
+        >
+          <div class="flex-1">
+            <div class="mb-2 h-4 w-24 bg-gray-400/10 md:mx-auto" />
+            <div class="h-7 w-36 animate-pulse bg-gray-200/10 md:mx-auto md:mb-4" />
+          </div>
+          <div class="mr-2 flex min-w-16 items-center justify-center md:mr-0">
+            <div class="size-12 animate-pulse rounded-full bg-white/10" />
+          </div>
+        </div>
+      </div>
+      <div v-else class="flex flex-wrap justify-center gap-4 md:text-center">
         <div
           v-for="(event, index) in events"
           :key="index"
@@ -62,7 +77,8 @@ onMounted(() => {
         >
           <div class="flex-1">
             <div class="uppercase tracking-wide text-gray-300">
-              {{ event.date.getDate() }} {{ $t(`month.${event.date.getMonth()}`)?.slice(0, 3) }} - {{ event.startTime }}
+              {{ event.date.getDate() }} {{ $t(`month.${event.date.getMonth()}`)?.slice(0, 3) }}
+              {{ event.startTime ? ` - ${event.startTime}` : '' }}
             </div>
             <div class="text-xl font-bold md:mb-4">
               {{ event.eventName }}
diff --git a/dwhdelft.nl/pages/mixup.vue b/dwhdelft.nl/pages/mixup.vue
index 7ecf9c65..1a89e7b4 100644
--- a/dwhdelft.nl/pages/mixup.vue
+++ b/dwhdelft.nl/pages/mixup.vue
@@ -97,17 +97,15 @@ const instagramChannelsMixup = [
     instagram: 'mixupdelft',
   },
 ]
-
-const linkedEventsReady = ref(false)
 </script>
 
 <template>
   <div class="mixup-colors">
-    <LayoutSmallHeader :triangleClass="linkedEventsReady ? 'border-gray-900' : 'border-black'">
+    <LayoutSmallHeader triangleClass="border-gray-900">
       {{ t('title') }}
     </LayoutSmallHeader>
 
-    <PagesMixupLinkedEvents @ready="linkedEventsReady = true" />
+    <PagesMixupLinkedEvents />
 
     <section class="mx-auto bg-brand-900 pb-24 pt-12 text-lg text-white md:flex">
       <ElementsContainer>