Return to ios style progress bar

Author: dfsnow

site/assets/css/main.scss

@@ -351,12 +351,11 @@ blockquote,
   top: 0;
   left: 0;
   width: 100%;
-  height: 3.6em;
-  opacity: 0.4;
+  height: 6px;
   background: #3498db;
   transform: scaleX(0);
   transform-origin: left;
-  transition: transform 0.6s ease, opacity 0.6s ease-out;
+  transition: transform 0.6s ease, opacity 0.4s ease-out 0.1s;
   z-index: 10;
 }
 

site/assets/js/map.js

@@ -239,6 +239,7 @@ class Spinner {
   constructor() {
     this.spinner = this.createSpinner();
     this.debounceTimeout = null;
+    this.isHiding = false;
   }
 
   createSpinner() {
@@ -248,42 +249,47 @@ class Spinner {
   }
 
   show() {
-    document.querySelector(".navbar").append(this.spinner);
+    this.isHiding = false;
+    const contentNode = document.querySelector(".content");
+    contentNode.appendChild(this.spinner);
+    // Reset spinner appearance
     this.spinner.classList.remove("spinner-fade-out");
     this.spinner.style.transform = "scaleX(0.0)";
     setTimeout(() => {
       this.spinner.style.transform = "scaleX(0.10)";
     }, 100);
   }
 
-  remove() {
-    const contentNode = document.querySelector(".navbar");
-    if (contentNode.contains(this.spinner)) {
-      contentNode.removeChild(this.spinner);
-    }
-  }
-
   hide() {
-    const contentNode = document.querySelector(".navbar");
-    if (contentNode.contains(this.spinner)) {
-      this.spinner.addEventListener("transitionend", (event) => {
-        if (event.propertyName === "transform") {
-          this.spinner.classList.add("spinner-fade-out");
-        }
-      }, { once: true });
-      this.spinner.addEventListener("transitionend", (event) => {
-        if (event.propertyName === "opacity") {
-          contentNode.removeChild(this.spinner);
-        }
-      }, { once: true });
-    }
+    if (this.isHiding) { return; };
+    this.isHiding = true;
+
+    const contentNode = document.querySelector(".content");
+    if (!contentNode.contains(this.spinner)) { return; };
+
+    // Expand spinner to full width
+    this.spinner.style.transform = "scaleX(1.0)";
+
+    let transformDone = false;
+    this.spinner.ontransitionend = (event) => {
+      if (!transformDone && event.propertyName === "transform") {
+        // When transform finishes, trigger the fade-out
+        transformDone = true;
+        this.spinner.classList.add("spinner-fade-out");
+      } else if (transformDone && event.propertyName === "opacity") {
+        // When opacity transition ends, remove the spinner
+        contentNode.removeChild(this.spinner);
+        this.spinner.ontransitionend = null;
+      }
+    };
   }
 
   updateProgress(percentage) {
-    const minProgress = 10,
-      progress = Math.max(percentage, minProgress);
+    if (this.isHiding) { return; };
+
+    const minProgress = 10;
+    const progress = Math.max(percentage, minProgress);
 
-    // Set a debounce to prevent rapid updates and bar jitter
     clearTimeout(this.debounceTimeout);
     this.debounceTimeout = setTimeout(() => {
       this.spinner.style.transform = `scaleX(${progress / 100})`;
@@ -725,7 +731,6 @@ class ParquetProcessor {
     totalGroups = rowGroupItems.length;
     if (totalGroups === 0) {
       console.warn("No data found for the given ID.");
-      map.spinner.remove();
       return results;
     }