Improve image loading animation and aspect ratio

src/components/ImageWithFallback.vue

@@ -23,7 +23,7 @@ const imageSource = computed(() => {
 </script>
 
 <template>
-  <figure class="overflow-hidden flex items-center justify-center bg-gray-50">
+  <figure class="overflow-hidden flex items-center justify-center bg-gray-50 aspect-2/3">
     <span v-if="!loaded" class="loading loading-ring loading-lg text-primary"></span>
 
     <div v-else-if="imageLoadFailed" class="flex items-center justify-center">
@@ -44,6 +44,7 @@ const imageSource = computed(() => {
     </div>
 
     <img
+      v-motion-fade-visible-once
       v-show="loaded && !imageLoadFailed"
       :src="imageSource"
       :alt="props.alt"

src/components/MediaCard.vue

@@ -36,7 +36,9 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
           class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-105"
         />
         <!-- Glassy gradient shadow overlay -->
-        <div class="absolute bottom-0 left-0 right-0 h-16 bg-linear-to-t from-white/40 via-white/20 to-transparent backdrop-blur-[0.5px] pointer-events-none"></div>
+        <div
+          class="absolute bottom-0 left-0 right-0 h-16 bg-linear-to-t from-white/40 via-white/20 to-transparent backdrop-blur-[0.5px] pointer-events-none"
+        ></div>
       </router-link>
 
       <!-- Radial progress placed on the right edge, centered on the seam between poster and body -->