From d2944f90db8e280b577ec52fe3079f46938d61c1 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Tue, 30 Apr 2024 14:11:29 +0200
Subject: [PATCH] remove placeholder

---
 client/src/components/ui/WagtailImage.vue | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/client/src/components/ui/WagtailImage.vue b/client/src/components/ui/WagtailImage.vue
index 3d77a43e..1addb046 100644
--- a/client/src/components/ui/WagtailImage.vue
+++ b/client/src/components/ui/WagtailImage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wagtail-image">
+  <div class="wagtail-image"  :style="backgroundStyle">
     <img
       :src="props.src"
       :srcset="props.srcset"
@@ -11,11 +11,7 @@
       ref="imgElement"
       @load="handleLoad"
     />
-    <div
-      class="wagtail-image__placeholder"
-      :style="placeholderStyle"
-      v-show="!loaded"
-    ></div>
+
   </div>
 </template>
 <script setup>
@@ -36,9 +32,9 @@ const loaded = ref(false);
 
 const updateDimensions = () => {
   if (imgElement.value && imgElement.value.parentElement) {
-    const { clientWidth, clientHeight } = imgElement.value.parentElement;
-    width.value = clientWidth;
-    height.value = clientHeight;
+    const { parentWidth, parentHeight } = imgElement.value.parentElement;
+    width.value = parentWidth;
+    height.value = parentHeight;
   }
 };
 
@@ -63,7 +59,7 @@ const computedSizes = computed(() => {
   return size;
 });
 
-const placeholderStyle = computed(() => {
+const backgroundStyle = computed(() => {
   const styles = {
     width: '100%',
     height: '100%',
@@ -100,6 +96,7 @@ onBeforeUnmount(() => {
 .wagtail-image {
   overflow: hidden;
   height: 100%;
+  background-color: $color-silver-light;
 
   &__image {
     width: 100%;
@@ -107,9 +104,5 @@ onBeforeUnmount(() => {
     object-fit: cover;
     object-position: center;
   }
-
-  &__placeholder {
-    background-color: $color-silver-light;
-  }
 }
 </style>