From 0c580bc9f1e0fa5aac1cb95262a880a013de8168 Mon Sep 17 00:00:00 2001
From: Stef <stbuwalda@gmail.com>
Date: Tue, 2 Sep 2025 21:43:20 +0200
Subject: [PATCH] Improved the progress bar / waiting bar

---
 mem/templates/home.html | 58 ++++++++++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 18 deletions(-)
diff --git a/mem/templates/home.html b/mem/templates/home.html
index f628a81..95ceeba 100644
--- a/mem/templates/home.html
+++ b/mem/templates/home.html
@@ -7,22 +7,30 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
+    <style>
+        /* Prevent Bootstrap's default 0.6s width tween that causes lag */
+        .progress-bar {
+            transition: none !important;
+        }
+    </style>
 </head>
 
 <body class="m-2 bg-light-subtle">
-    <div class="progress">
-        <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%;"></div>
+    <div class="progress" style="height: 20px;">
+        <div id="progressBar" class="progress-bar rounded-pill" role="progressbar" style="width: 100%; margin: 0 auto;">
+            5s
+        </div>
     </div>
     <div id="main_body" class="d-flex flex-wrap justify-content-center"></div>
 </body>
 
 <script>
-    let progress = 0;
-    const progressBar = document.getElementById('progress-bar');
-    const interval = 5000; // 5 seconds
     const main_body = document.getElementById("main_body");
     const url = '/api/status';
 
+    const interval = 5000; // 5 seconds between requests
+    const progressBar = document.getElementById('progressBar');
+
     function fetchData() {
         fetch(url, { cache: 'no-store' })
             .then(response => response.json())
@@ -32,22 +40,36 @@
             })
             .catch(error => console.error("Error fetching data", error))
             .finally(() => {
-                progress = 0;
-                progressBar.style.width = '0%';
-                // Start progress animation
-                const step = 50; // ms
-                const increment = step / interval * 100;
-                const progressInterval = setInterval(() => {
-                    progress += increment;
-                    if (progress >= 100) {
-                        clearInterval(progressInterval);
-                    }
-                    progressBar.style.width = `${Math.min(progress, 100)}%`;
-                }, step);
-                setTimeout(fetchData, interval); // schedule next request after 5 seconds
+                // Animate progress bar over 'interval' before next fetch
+                animateProgress(interval, () => {
+                    fetchData(); // next fetch after animation
+                });
             });
     }
 
+    function animateProgress(duration, callback) {
+        const start = performance.now();
+
+        function frame(now) {
+            const elapsed = now - start;
+            const ratio = Math.min(elapsed / duration, 1);
+
+            progressBar.style.width = 100 * (1 - ratio) + "%";
+            progressBar.textContent = (interval * (1 - ratio) / 1000).toFixed(1) + "s";
+
+            if (ratio < 1) {
+                requestAnimationFrame(frame);
+            } else {
+                callback();
+            }
+        }
+
+        // reset bar and start animation
+        progressBar.style.width = '100%';
+        progressBar.textContent = '100%';
+        requestAnimationFrame(frame);
+    }
+
     function updateWebpage(services) {
         main_body.innerHTML = ''; // Clear webpage
 
