Update templates/index.html

templates/index.html

@@ -274,13 +274,6 @@
         const loadingGif = "{{ url_for('static', filename='eye.gif') }}";
         const newUrl = decodeURIComponent("{{ url|safe }}");
     
-        feed.style.width = "80px";
-        feed.style.height = "50px";
-        feed.src = loadingGif;
-        feed.style.opacity = "0.15";
-        infoText.style.opacity = "0";
-        locationName.textContent = "{{ page_title|safe }}";
-    
         async function refreshImage() {
             try {
                 const response = await fetch(newUrl, { method: 'HEAD' });
@@ -297,47 +290,57 @@
             }
         }
     
-        feed.onload = function() {
-            if (firstLoad) {
-                countryElement.textContent = "connecting...";
-                infoDiv.style.opacity = "0";
-            }
-            firstLoad = false;
+        async function init() {
+            feed.style.width = "80px";
+            feed.style.height = "50px";
+            feed.src = loadingGif;
+            feed.style.opacity = "0.15";
+            infoText.style.opacity = "0";
+            locationName.textContent = "{{ page_title|safe }}";
     
-            setTimeout(() => {
-                locationName.textContent = "{{ name|safe }}";
-                countryElement.textContent = "{{ country|safe }}";
-                feed.style.width = "100%";
-                feed.style.height = "70%";
-                feed.style.opacity = "1";
-                infoDiv.style.opacity = "1";
-            }, 100);
+            await refreshImage();
     
-            infoText.style.opacity = "1";
-            setTimeout(refreshImage, 500); 
-        };
+            feed.onload = function() {
+                if (firstLoad) {
+                    countryElement.textContent = "connecting...";
+                    infoDiv.style.opacity = "0";
+                }
+                firstLoad = false;
     
-        feed.onerror = function() {
-            console.error('Error loading feed', this.src);
-            const urlParams = new URLSearchParams(window.location.search);
+                setTimeout(() => {
+                    locationName.textContent = "{{ name|safe }}";
+                    countryElement.textContent = "{{ country|safe }}";
+                    feed.style.width = "100%";
+                    feed.style.height = "70%";
+                    feed.style.opacity = "1";
+                    infoDiv.style.opacity = "1";
+                }, 100);
     
-            if (urlParams.get('id')) {
-                firstLoad = false;
-                feed.style.width = "80px";
-                feed.style.height = "50px";
-                feed.src = loadingGif;
-                feed.style.opacity = "0.15";
-                countryElement.textContent = "couldn't connect.";
-            } else if (firstLoad) {
-                window.location.href = "?new=true";
-            } else {
-                firstLoad = false;
-                console.log("Trying again");
-                setTimeout(refreshImage, 250);
-            }
-        };
+                infoText.style.opacity = "1";
+            };
+    
+            feed.onerror = function() {
+                console.error('Error loading feed', this.src);
+                const urlParams = new URLSearchParams(window.location.search);
+    
+                if (urlParams.get('id')) {
+                    firstLoad = false;
+                    feed.style.width = "80px";
+                    feed.style.height = "50px";
+                    feed.src = loadingGif;
+                    feed.style.opacity = "0.15";
+                    countryElement.textContent = "couldn't connect.";
+                } else if (firstLoad) {
+                    window.location.href = "?new=true";
+                } else {
+                    firstLoad = false;
+                    console.log("Trying again");
+                    setTimeout(refreshImage, 250);
+                }
+            };
+        }
     
-        refreshImage();
+        init();
         console.log('Feed load initiated');
     });