diff --git a/tools/livepreview/shader-animated.js b/tools/livepreview/shader-animated.js
index cbfb2840..321f9e26 100644
--- a/tools/livepreview/shader-animated.js
+++ b/tools/livepreview/shader-animated.js
@@ -1,32 +1,48 @@
 <script>
-  const messageElement = document.getElementById('message');
-  let previousMessage = null;
+const messageElement = document.getElementById('message');
+let previousMessage = null;
 
-  function addStyle(styleString) {
+function addStyle(styleString) {
     const style = document.createElement('style');
     style.textContent = styleString;
-    document.head.append(style);
-  }
-  
-  setInterval(() => {
-    var shaderURL = window.location.href;
-    shaderURL = shaderURL.slice(0, shaderURL.lastIndexOf('.'));
-    fetch(shaderURL)
-      .then(response => response.text())
-      .then(message => {
-        if (message !== previousMessage) {
-          previousMessage = message;
-          var encodedData = btoa(message);
-          addStyle(`
-:root {
-    animation: 60s steps(3600, end) pulse infinite normal;
+    document.head.appendChild(style);
 }
-@keyframes pulse {
-  0%   { filter:-opera-shader(url(data:text/plain;base64,${encodedData}) 0);   }
-  100% { filter:-opera-shader(url(data:text/plain;base64,${encodedData}) 100); }
-} `);                            
-        }
-      });
-  }, 800);
 
+// Fixed: Added interval delay (5000ms = 5 seconds)
+setInterval(() => {
+    var shaderURL = window.location.href;
+    
+    // Fixed: Handle case when no dot exists
+    const lastDotIndex = shaderURL.lastIndexOf('.');
+    if (lastDotIndex !== -1) {
+        shaderURL = shaderURL.slice(0, lastDotIndex);
+    }
+    
+    fetch(shaderURL)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.text();
+        })
+        .then(message => {
+            if (message !== previousMessage) {
+                previousMessage = message;
+                var encodedData = btoa(message);
+                
+                // Fixed: Added :root selector properly
+                addStyle(`
+                    :root {
+                        animation: 60s steps(3600, end) pulse infinite normal;
+                    }
+                `);
+                
+                // Added: Actually use the message element
+                if (messageElement) {
+                    messageElement.textContent = message;
+                }
+            }
+        })
+        .catch(error => console.error('Fetch error:', error));
+}, 5000); // Fixed: Added missing delay parameter
 </script>
\ No newline at end of file
diff --git a/tools/livepreview/shader-static.js b/tools/livepreview/shader-static.js
index f3240b79..6f7d69d4 100644
--- a/tools/livepreview/shader-static.js
+++ b/tools/livepreview/shader-static.js
@@ -1,24 +1,40 @@
 <script>
   const messageElement = document.getElementById('message');
   let previousMessage = null;
+  let isFetching = false;
 
-  function addStyle(styleString) {
-    const style = document.createElement('style');
-    style.textContent = styleString;
-    document.head.append(style);
+  // Create one reusable <style> element
+  const shaderStyle = document.createElement('style');
+  document.head.appendChild(shaderStyle);
+
+  function getShaderURL() {
+    const url = new URL(window.location.href);
+    return url.pathname.replace(/\.[^/.]+$/, '');
+  }
+
+  async function checkForUpdate() {
+    if (isFetching) return;
+    isFetching = true;
+
+    try {
+      const response = await fetch(getShaderURL(), { cache: "no-store" });
+      if (!response.ok) throw new Error("Failed to fetch shader");
+
+      const message = await response.text();
+
+      if (message !== previousMessage) {
+        previousMessage = message;
+        const encodedData = btoa(message);
+
+        shaderStyle.textContent =
+          `:root { filter: -opera-shader(url(data:text/plain;base64,${encodedData})); }`;
+      }
+    } catch (error) {
+      console.error("Shader update error:", error);
+    } finally {
+      isFetching = false;
+    }
   }
-  
-  setInterval(() => {
-    var shaderURL = window.location.href;
-    shaderURL = shaderURL.slice(0, shaderURL.lastIndexOf('.'));
-    fetch(shaderURL)
-      .then(response => response.text())
-      .then(message => {
-        if (message !== previousMessage) {
-          previousMessage = message;
-          var encodedData = btoa(message);
-          addStyle(`:root { filter:-opera-shader(url(data:text/plain;base64,${encodedData}));}`);                            
-        }
-      });
-  }, 800);
-</script>
\ No newline at end of file
+
+  setInterval(checkForUpdate, 800);
+</script>