Gray out a detached popover before recyling it.

2 files changed, 13 insertions, 3 deletions

diff --git a/main.js b/main.js
index 9afd3e7..f16e08b 100644
--- a/main.js
+++ b/main.js
@@ -3756,7 +3756,10 @@ const [vectorLayers, featureOverlayLayer] = (function() {
       if (def !== undefined && def.popover !== undefined) {
         /* skip layers which didn't opt-in for popover */
         if (!fetch_body.length) {
-          document.body.classList.add('progress');
+          document.body.classList.add('inprogress');
+          if (popover !== null && popover.tip !== null) {
+            popover.tip.classList.add('inprogress');
+          }
         }
         fetch_body.push({
           layer_group: layerGroup,
@@ -3906,10 +3909,11 @@ const [vectorLayers, featureOverlayLayer] = (function() {
         else if (popover.tip.classList.contains('popover-detached')) {
           /* update existing detached mode popover */
           refreshPopover();
+          popover.tip.classList.remove('inprogress');
         }
       })
       .finally(function() {
-        document.body.classList.remove('progress');
+        document.body.classList.remove('inprogress');
       });
   });
 }());
diff --git a/style.css b/style.css
index 09d00f2..6a1b1eb 100644
--- a/style.css
+++ b/style.css
@@ -24,7 +24,7 @@ html, body {
   --map-container-padding: 1rem;
 }
 
-body.progress {
+body.inprogress {
   cursor: wait;
 }
 
@@ -349,10 +349,16 @@ body.progress {
   width: var(--bs-popover-max-width);
   pointer-events: auto;
 }
+.popover.inprogress > .popover-header,
+.popover.inprogress > .popover-body {
+  filter: opacity(70%);
+  pointer-events: none;
+}
 .popover-header {
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
+  --bs-heading-color: var(--bs-popover-header-color);
 }
 .popover-body {
   -webkit-user-select: text;