Performance improvements

frontend/app/components/content/BlurImage.vue

@@ -1,45 +1,78 @@
 <template>
   <div class="image-wrapper">
-    <img
-      :src="lowResSrc"
-      :alt="alt"
-      class="image-base blur-sm scale-105"
-      :class="{ 'opacity-0': isLoaded }"
-    />
-    <img
-      :src="highResSrc"
-      :alt="alt"
-      class="image-base"
-      :class="{ 'opacity-0': !isLoaded }"
-      @load="isLoaded = true"
-    />
+    <img :src="highResSrc" alt="" class="image-sizer" aria-hidden="true" />
+    <div class="subwrapper">
+      <img
+        :src="lowResSrc"
+        :alt="alt"
+        class="image-low"
+        :class="{ 'opacity-0': isLoaded }"
+      />
+      <img
+        :src="highResSrc"
+        :alt="alt"
+        class="image-high"
+        :class="{ 'opacity-0': !isLoaded }"
+        @load="isLoaded = true"
+      />
+      <div v-if="!isLoaded" class="spinner-overlay">
+        <div class="spinner" />
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .image-wrapper {
   position: relative;
+  display: flex;
+  justify-content: center;
 }
-
-.image-base {
+.image-sizer {
+  display: block;
   width: 100%;
+  height: auto;
+  visibility: hidden;
+}
+.image-low {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0%);
   height: 100%;
-  object-fit: cover;
+  filter: blur(20px);
   transition: opacity 0.3s ease;
 }
-
-.image-base:last-child {
+.image-high {
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  max-width: 100%;
+  height: auto;
+  transition: opacity 0.3s ease;
 }
-
-.blur-sm {
-  filter: blur(20px);
-}
-
 .opacity-0 {
   opacity: 0;
 }
+.spinner-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(255, 255, 255, 0.4);
+  border-top-color: rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  animation: spin 0.75s linear infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
 </style>
 
 <script setup>
@@ -48,6 +81,5 @@ defineProps({
   highResSrc: { type: String, required: true },
   alt: { type: String, default: '' },
 })
-
 const isLoaded = ref(false)
-</script>
+</script>