clean up

static/css/style-loadingcircle.css

@@ -0,0 +1,31 @@
+.favicon-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+}
+
+.favicon-wrapper.loading img {
+    visibility: hidden; /* hide placeholder */
+}
+
+.favicon-wrapper.loading::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 14px;
+    height: 14px;
+    margin: -8px 0 0 -8px;
+    border: 2px solid var(--html-bg);
+    border-top-color: var(--fg);
+    border-radius: 50%;
+    animation: spin 0.7s linear infinite;
+    z-index: 2;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

static/js/dynamicscrollingtext.js

@@ -5,8 +5,8 @@
     const hardCacheEnabled = templateData.getAttribute('data-hard-cache-enabled') === 'true';
     
     // Track all favicon/image elements and their IDs
-    const allMediaElements = [];
-    const allMediaIds = [];
+    let allMediaElements = [];
+    let allMediaIds = [];
     let statusCheckTimeout = null;
 
     // Add loading effects to image/favicon and associated text
@@ -93,11 +93,9 @@
         addLoadingEffects(imgElement);
 
 
-        if (hardCacheEnabled) {
-            imgElement.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
-        } else {
-            imgElement.src = '/static/images/placeholder.svg';
-        }
+        if (!hardCacheEnabled) {
+            imgElement.src = ''; // don't show anything until actual URL arrives
+        }        
         
         // Schedule a status check if not already pending
         if (!statusCheckTimeout) {