From 81708603229951041eadb2437ce4aa810ef6898a Mon Sep 17 00:00:00 2001
From: Alejandra <90076947+alejsdev@users.noreply.github.com>
Date: Mon, 22 Sep 2025 17:11:52 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20sponsor=20image?=
 =?UTF-8?q?=20handling=20(#14102)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
---
 docs/en/docs/css/custom.css | 12 ++++++++++--
 docs/en/docs/js/custom.js   | 39 +++++++++++++++++++++++++------------
 2 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/docs/en/docs/css/custom.css b/docs/en/docs/css/custom.css
index b192f6123..a38df772f 100644
--- a/docs/en/docs/css/custom.css
+++ b/docs/en/docs/css/custom.css
@@ -102,7 +102,15 @@ a.announce-link:hover {
   align-items: center;
 }
 
-.announce-wrapper div.item {
+.announce-wrapper #announce-left div.item {
+  display: none;
+}
+
+.announce-wrapper #announce-right {
+  display: none;
+}
+
+.announce-wrapper #announce-right div.item {
   display: none;
 }
 
@@ -112,7 +120,7 @@ a.announce-link:hover {
   top: -10px;
   right: 0;
   font-size: 0.5rem;
-  color: #999;
+  color: #e6e6e6;
   background-color: #666;
   border-radius: 10px;
   padding: 0 10px;
diff --git a/docs/en/docs/js/custom.js b/docs/en/docs/js/custom.js
index 425b7fce7..48e95901d 100644
--- a/docs/en/docs/js/custom.js
+++ b/docs/en/docs/js/custom.js
@@ -135,28 +135,43 @@ async function showRandomAnnouncement(groupId, timeInterval) {
     }
 }
 
-function hideSponsorOnImageError() {
-    const sponsorImages = document.querySelectorAll('.sponsor-image');
+function handleSponsorImages() {
     const announceRight = document.getElementById('announce-right');
+    if(!announceRight) return;
 
-    function hideAnnounceRight() {
-        if (announceRight) {
-            announceRight.style.display = 'none';
-        }
-    }
+    const sponsorImages = document.querySelectorAll('.sponsor-image');
 
-    sponsorImages.forEach(function(img) {
-        img.addEventListener('error', function() {
-            hideAnnounceRight();
+    const imagePromises = Array.from(sponsorImages).map(img => {
+        return new Promise((resolve, reject) => {
+            if (img.complete && img.naturalHeight !== 0) {
+                resolve();
+            } else {
+                img.addEventListener('load', () => {
+                    if (img.naturalHeight !== 0) {
+                        resolve();
+                    } else {
+                        reject();
+                    }
+                });
+                img.addEventListener('error', reject);
+            }
         });
     });
+
+    Promise.all(imagePromises)
+        .then(() => {
+            announceRight.style.display = 'block';
+            showRandomAnnouncement('announce-right', 10000);
+        })
+        .catch(() => {
+            // do nothing
+        });
 }
 
 async function main() {
     setupTermynal();
     showRandomAnnouncement('announce-left', 5000)
-    showRandomAnnouncement('announce-right', 10000)
-    hideSponsorOnImageError();
+    handleSponsorImages();
 }
 document$.subscribe(() => {
     main()