From 4491d24a4ecf7161dc68b4c942166456732e9883 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Fri, 12 Apr 2024 00:19:21 +0200
Subject: [PATCH] added preloading to some images to reduce the CLS

---
 webclient/components/DetailsInfoSection.vue | 2 ++
 webclient/pages/[view]/[id].vue             | 1 +
 2 files changed, 3 insertions(+)

diff --git a/webclient/components/DetailsInfoSection.vue b/webclient/components/DetailsInfoSection.vue
index e15de1758..dc6672021 100644
--- a/webclient/components/DetailsInfoSection.vue
+++ b/webclient/components/DetailsInfoSection.vue
@@ -29,6 +29,8 @@ const runtimeConfig = useRuntimeConfig();
           :alt="t('image_alt')"
           :src="`${runtimeConfig.public.cdnURL}/cdn/lg/${shownImage.name}`"
           class="bg-zinc-100 block h-auto w-full max-w-full rounded-t-lg"
+          preload
+          placeholder
         />
       </button>
       <div class="px-5 py-3">
diff --git a/webclient/pages/[view]/[id].vue b/webclient/pages/[view]/[id].vue
index 1cdd2fb16..902f130e8 100644
--- a/webclient/pages/[view]/[id].vue
+++ b/webclient/pages/[view]/[id].vue
@@ -137,6 +137,7 @@ onMounted(() => {
         :src="`${runtimeConfig.public.cdnURL}/cdn/lg/${data.imgs[0].name}`"
         densities="x1 x2 x3 x4"
         class="block w-full"
+        preload
         placeholder
       />
     </button>