Hacky fix for carousel

apps/panoramablick-saalbach.at/components/AppThumbnailCarousel.vue

@@ -26,11 +26,24 @@ function select(index: number) {
   carousel.value?.emblaApi?.scrollTo(index)
 }
 
+// Weird stuff is going on here.
+// - If the page loads slowly, some images are not shown in the carousel viewport
+// - However they are visible when dragging left or right
+// - When removing overflow-hidden from the direct parent of the images row all are visible
+// - Potentially only happens when auto-height plugin is used
+// - When resizing the window suddenly all images become visible
+// - Updating the key to force to re-render is just a hack
 
+const loaded = Object.fromEntries(props.images.map(img => [img, ref(img)]))
+
+function setLoaded(item) {
+  loaded[item].value = item + 'loaded'
+}
 
 </script>
 
 
+
 <template>
   <div class="flex flex-col items-center justify-start p-4">
     <!-- main slider -->
@@ -51,7 +64,7 @@ function select(index: number) {
         class="relative w-full"
         @select="onSelect"
     >
-      <NuxtImg :src="item" class="object-cover" alt="Bild" preload/>
+      <NuxtImg :key="loaded[item]" :src="item" class="object-cover" alt="Bild" preload @load="setLoaded(item)"/>
     </UCarousel>
 
     <!-- thumbnails -->