From 7578a2640d9d2c075d74f217ce7fb8515f92707d Mon Sep 17 00:00:00 2001
From: Fox Islam <28842757+Fox-Islam@users.noreply.github.com>
Date: Tue, 4 Jul 2023 14:00:56 +0100
Subject: [PATCH 1/2] Apply overlays after all images have loaded

The current behavior starts applying overlays after a short timeout, irrespective of whether all the images have loaded or not. For slow connections this means that all the overlays may end up being the same one or two images repeated.

This commit ensures the overlays only start applying once we've stopped fetching image URLs.
---
 mrbeastify.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/mrbeastify.js b/mrbeastify.js
index 8a0ce67..a03e27f 100644
--- a/mrbeastify.js
+++ b/mrbeastify.js
@@ -59,6 +59,9 @@ function checkImageAmountInDirectory() { // Checks for all images in the images
           imageIndex++;
           checkImageExistence();
         }
+      })
+      .catch(() => {
+        applyOverlayToThumbnails();
       });
   }
   checkImageExistence();
@@ -71,8 +74,5 @@ function getRandomImageFromDirectory() {
 }
 
 checkImageAmountInDirectory()
-setInterval(function () {
-  applyOverlayToThumbnails();
-}, 100);
 
-console.log("MrBeastify Loaded Successfully");
\ No newline at end of file
+console.log("MrBeastify Loaded Successfully");

From 1ceb73b7159d5ec5c31dc7d6bb57d694914febe8 Mon Sep 17 00:00:00 2001
From: MagicJinn <jinn.bz@mail.com>
Date: Tue, 4 Jul 2023 17:45:16 +0200
Subject: [PATCH 2/2] code now only starts running after images loaded

---
 mrbeastify.js | 43 ++++++++++++++++++-------------------------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/mrbeastify.js b/mrbeastify.js
index a03e27f..3b78583 100644
--- a/mrbeastify.js
+++ b/mrbeastify.js
@@ -45,34 +45,27 @@ function applyOverlayToThumbnails() {
   });
 }
 
-function checkImageAmountInDirectory() { // Checks for all images in the images folder instead of using a preset array, making the extension infinitely scalable
-  let imageIndex = 1;
-
-  function checkImageExistence() {
-    const testedURL = chrome.runtime.getURL(`${imagesPath}${imageIndex}.png`);
-    fetch(testedURL)
-      .then(response => {
-        if (response.status === 200) {
-          // Image exists, add it to the images array
-          images.push(testedURL);
-          // Check the next image in the directory
-          imageIndex++;
-          checkImageExistence();
-        }
-      })
-      .catch(() => {
-        applyOverlayToThumbnails();
-      });
-  }
-  checkImageExistence();
+function checkImageExistence(index = 1) { // Checks for all images in the images folder instead of using a preset array, making the extension infinitely scalable
+  const testedURL = chrome.runtime.getURL(`${imagesPath}${index}.png`);
+  fetch(testedURL).then(response => {
+    if (response.status === 200) {
+      // Image exists, add it to the images array
+      images.push(testedURL);
+      // Check the next image in the directory
+      checkImageExistence(index + 1);
+    }
+  }).catch(error => {
+    setInterval(applyOverlayToThumbnails, 100);
+    console.log("MrBeastify Loaded Successfully, " + (index - 1) + " images detected.");
+  });
 }
 
+
+checkImageExistence();
+
+
 // Get a random image URL from a directory
 function getRandomImageFromDirectory() {
   const randomIndex = Math.floor(Math.random() * images.length);
   return images[randomIndex];
-}
-
-checkImageAmountInDirectory()
-
-console.log("MrBeastify Loaded Successfully");
+}
\ No newline at end of file