From 15c1a85f48ae30ce3c5817619834e1f4b8ce5e5c Mon Sep 17 00:00:00 2001
From: Marcos Luis Delgado <mluis@tuenti.com>
Date: Tue, 21 Apr 2026 16:10:03 +0100
Subject: [PATCH] fix(Image): handle SSR image already complete before inline
 script runs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The inline <script> rendered after <img> in SSR attached a 'load'
listener to set opacity to 1. When the image finished loading before
the script was parsed, the listener never fired and the image stayed
at opacity 0 — causing flaky snapshot diffs in the SSR acceptance test.
Check img.complete first and set opacity synchronously in that case.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/image.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/image.tsx b/src/image.tsx
index bb62a7fe70..bd931d4d9f 100644
--- a/src/image.tsx
+++ b/src/image.tsx
@@ -281,7 +281,14 @@ export const ImageContent = React.forwardRef<HTMLImageElement, ImageProps>(
                     <script
                         // eslint-disable-next-line react/no-danger
                         dangerouslySetInnerHTML={{
-                            __html: `document.getElementById("${imageId}").addEventListener('load', (e) => e.target.style.opacity = "1")`,
+                            __html: `(function () {
+    var img = document.getElementById("${imageId}");
+    if (img.complete) {
+        img.style.opacity = "1";
+    } else {
+        img.addEventListener('load', function (e) { e.target.style.opacity = "1"; });
+    }
+})();`,
                         }}
                     />
                 )}