From 71d1339980c5dc54935c09548018c24368934229 Mon Sep 17 00:00:00 2001
From: Rares Munteanu <overmyheadandbody@gmail.com>
Date: Wed, 3 Dec 2025 18:08:12 +0100
Subject: [PATCH] [MWPW-184752] Ensure carousel first slide img load

---
 libs/blocks/carousel/carousel.js | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/libs/blocks/carousel/carousel.js b/libs/blocks/carousel/carousel.js
index 83d75aa4185..617f85e7680 100644
--- a/libs/blocks/carousel/carousel.js
+++ b/libs/blocks/carousel/carousel.js
@@ -150,7 +150,33 @@ function handlePrevious(previousElment, elements) {
   return elements[elements.length - 1];
 }
 
-function setEqualHeight(slides, slideContainer, currentActiveIndex = 0) {
+async function waitImgReady(img) {
+  if (!img) return;
+
+  if (!img.complete) {
+    await new Promise((resolve) => {
+      img.addEventListener('load', resolve, { once: true });
+    });
+  }
+
+  if ((img.offsetHeight === 0 || img.clientHeight === 0) && img.naturalHeight) {
+    await new Promise((resolve) => {
+      const ro = new ResizeObserver(() => {
+        if (img.offsetHeight > 0 && img.clientHeight > 0) {
+          ro.disconnect();
+          resolve();
+        }
+      });
+      ro.observe(img);
+    });
+  }
+}
+
+async function setEqualHeight(slides, slideContainer, currentActiveIndex = 0) {
+  const allImgs = slides[0]?.querySelectorAll('picture img');
+  if (allImgs?.length) {
+    await Promise.all([...allImgs].map((img) => waitImgReady(img)));
+  }
   const maxHeight = Math.max(...slides.map((slide) => slide.offsetHeight));
   const activeSlide = slides[currentActiveIndex];
   slides.forEach((slide) => {