From 45b8b40ce88c94bc4ad1741ba083800bdc9cb2e1 Mon Sep 17 00:00:00 2001
From: Stefan Siegl <stesie@brokenpipe.de>
Date: Mon, 22 Mar 2021 20:54:11 +0100
Subject: [PATCH] Add loading indicator

---
 css/style.css      |  9 ++++++---
 index.html         |  5 ++++-
 js/LayersConfig.js | 41 ++++++++++++++++++++++++++++++-----------
 locales/en.json    |  1 +
 4 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/css/style.css b/css/style.css
index 7575ced..40700d5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -224,11 +224,14 @@ input#trackname:focus:invalid {
     /* map click/drag selects text in controls in Firefox because of display flex */
     -moz-user-select: none;
 }
-.leaflet-control-container,
-#message .alert {
+.leaflet-control-container {
     -moz-user-select: text;
 }
-#message {
+#notification_jar .alert {
+    -moz-user-select: text;
+    margin-bottom: 10px;
+}
+#notification_jar {
     position: absolute;
     margin: 10px 46px; /* 10 + 26 + 10 */
     z-index: 3001;
diff --git a/index.html b/index.html
index aaababb..1769e9c 100644
--- a/index.html
+++ b/index.html
@@ -847,7 +847,10 @@
 
             <div class="leaflet-sidebar-flex-row flexgrow">
                 <div id="map" class="leaflet-sidebar-map">
-                    <div id="message"></div>
+                    <div id="notification_jar">
+                        <div id="message"></div>
+                        <div id="overpass_loading_indicator"></div>
+                    </div>
                     <div id="preview" hidden data-i18n="map.preview">Preview</div>
                 </div>
 
diff --git a/js/LayersConfig.js b/js/LayersConfig.js
index 0714c48..ee56372 100644
--- a/js/LayersConfig.js
+++ b/js/LayersConfig.js
@@ -10,6 +10,8 @@ BR.LayersConfig = L.Class.extend({
 
     initialize: function (map) {
         this._map = map;
+        this._overpassLoadingIndicator = new BR.Message('overpass_loading_indicator', { alert: false });
+        this._overpassActiveRequestCount = 0;
 
         this._addLeafletProvidersLayers();
         this._customizeLayers();
@@ -172,18 +174,35 @@ BR.LayersConfig = L.Class.extend({
         return result;
     },
 
+    _showOverpassLoadingIndicator: function () {
+        this._overpassActiveRequestCount++;
+        this._overpassLoadingIndicator.showInfo(i18next.t('layers.overpass-loading-indicator'));
+    },
+
+    _hideOverpassLoadingIndicator: function () {
+        if (--this._overpassActiveRequestCount === 0) {
+            this._overpassLoadingIndicator.hide();
+        }
+    },
+
     createOverpassLayer: function (query) {
-        return new OverpassLayer({
-            overpassFrontend: this.overpassFrontend,
-            query: query,
-            minZoom: 12,
-            feature: {
-                title: '{{ tags.name }}',
-                body:
-                    '<table class="overpass-tags">{% for k, v in tags %}{% if k[:5] != "addr:" %}<tr><th>{{ k }}</th><td>{% if k matches "/email/" %}<a href="mailto:{{ v }}">{{ v }}</a>{% elseif v matches "/^http/" %}<a href="{{ v }}">{{ v }}</a>{% elseif v matches "/^www/" %}<a href="http://{{ v }}">{{ v }}</a>{% else %}{{ v }}{% endif %}</td></tr>{% endif %}{% endfor %}</table>',
-                markerSymbol: null,
-            },
-        });
+        return Object.assign(
+            new OverpassLayer({
+                overpassFrontend: this.overpassFrontend,
+                query: query,
+                minZoom: 12,
+                feature: {
+                    title: '{{ tags.name }}',
+                    body:
+                        '<table class="overpass-tags">{% for k, v in tags %}{% if k[:5] != "addr:" %}<tr><th>{{ k }}</th><td>{% if k matches "/email/" %}<a href="mailto:{{ v }}">{{ v }}</a>{% elseif v matches "/^http/" %}<a href="{{ v }}">{{ v }}</a>{% elseif v matches "/^www/" %}<a href="http://{{ v }}">{{ v }}</a>{% else %}{{ v }}{% endif %}</td></tr>{% endif %}{% endfor %}</table>',
+                    markerSymbol: null,
+                },
+            }),
+            {
+                onLoadStart: this._showOverpassLoadingIndicator.bind(this),
+                onLoadEnd: this._hideOverpassLoadingIndicator.bind(this),
+            }
+        );
     },
 
     createLayer: function (layerData) {
diff --git a/locales/en.json b/locales/en.json
index e93ec46..a1523e6 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -78,6 +78,7 @@
     "custom-layer-url-label": "Custom layer URL/Query",
     "customize": "Customize layers",
     "opacity-slider": "Opacity slider",
+    "overpass-loading-indicator": "Running Overpass API query ...",
     "remove-selection": "Remove selection"
   },
   "loadNogos": {