Update templates/index.html

templates/index.html

@@ -113,7 +113,7 @@
           font-size: 10pt;
         }
         .feed {
-          transition: opacity 0.3s ease;
+          transition: 0.3s ease;
           width: 100%;
           height: 100%;
           max-height: 80vh;
@@ -357,23 +357,28 @@
         const img = new Image();
         img.onload = function() {
             if (firstLoad) {
-              infoDiv.style.height = "0%";
+                infoDiv.style.height = "0%";
             }
             firstLoad = false;
             old = newUrl;
             feed.src = this.src;
-            setTimeout(() => {
-              locationName.textContent = "{{ name|safe }}";
-              feed.style.width = "100%";
-              feed.style.height = "70%";
-              feed.style.opacity = "1";
-              infoDiv.style.height = "100%";
-              infoText.style.opacity = "1";
-            }, 300);
+            country.textContent = "connecting...";
+        
+            const pixelWidth = this.naturalWidth;
+        
+            feed.style.width = "0px"; 
           
+            setTimeout(() => {
+                locationName.textContent = "{{ name|safe }}";
+                feed.style.width = pixelWidth + "px"; 
+                feed.style.height = "70%";
+                feed.style.opacity = "1";
+                infoDiv.style.height = "100%";
+                infoText.style.opacity = "1";
+                country.textContent = "{{ country }}";
+            }, 100);
+        
             setTimeout(refreshImage, 500);
-            country.textContent = "{{ country }}";
-          
         };
         
         img.onerror = function(event) {