♻️ Refactor sponsor image handling (#14102)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

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;

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()