Remove blocking overlay

dfsnow · Dec 15, 2024 · d07bf4a · d07bf4a
1 parent 04eae1d
commit d07bf4a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 27 deletions.
diff --git a/site/assets/css/main.scss b/site/assets/css/main.scss
@@ -39,10 +39,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-body.loading {
-  cursor: not-allowed;
-}
-
 a {
   color: var(--link-color);
   text-underline-offset: 0.15em;
@@ -351,16 +347,6 @@ blockquote,
   z-index: 1001;
 }
 
-#map-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.0);
-  z-index: 1000;
-}
-
 #map-color-scale {
   position: absolute;
   top: 10px;

diff --git a/site/assets/js/map.js b/site/assets/js/map.js
@@ -131,7 +131,6 @@ class ColorScale {
 class Spinner {
   constructor() {
     this.spinner = this.createSpinner();
-    this.overlay = this.createOverlay();
   }
 
   createSpinner() {
@@ -140,23 +139,17 @@ class Spinner {
     return spinner;
   }
 
-  createOverlay() {
-    const overlay = document.createElement("div");
-    overlay.id = "map-overlay";
-    return overlay;
-  }
-
   show() {
-    document.querySelector(".content").append(this.overlay, this.spinner);
-    document.body.classList.add("loading");
+    document.querySelector(".content").append(this.spinner);
     this.spinner.style.transform = "scaleX(0.05)";
   }
 
   hide() {
-    document.querySelector(".content").removeChild(this.overlay);
-    document.body.classList.remove("loading");
     setTimeout(() => {
-      document.querySelector(".content").removeChild(this.spinner);
+      const contentNode = document.querySelector(".content");
+      if (contentNode.contains(this.spinner)) {
+        contentNode.removeChild(this.spinner);
+      }
     }, 700);
   }
 
@@ -175,6 +168,7 @@ class Map {
     this.processor = processor;
     this.hoveredPolygonId = null;
     this.previousZoomLevel = null;
+    this.isProcessing = false;
   }
 
   init() {
@@ -257,13 +251,18 @@ class Map {
     });
 
     this.map.on("click", async (feat) => {
+      // Do nothing if already querying
+      if (this.isProcessing) {
+        return;
+      }
+      this.isProcessing = true;
+      this.spinner.show();
       const features = this.map.queryRenderedFeatures(
         feat.point,
         { layers: ["tracts_fill"] }
       );
       if (features.length > 0) {
         const [feature] = features;
-        this.spinner.show();
         await this.processor.runQuery(
           this,
           feature.properties.state,
@@ -273,6 +272,7 @@ class Map {
         // Update the URL with ID
         window.history.replaceState({}, "", `?id=${feature.properties.id}${window.location.hash}`);
         this.spinner.hide();
+        this.isProcessing = false;
       }
     });