From 730b06afe1c87f6d4d77677bdaf2c617aa74c7a9 Mon Sep 17 00:00:00 2001
From: "D. Berge" <dberge@aaltronav.eu>
Date: Tue, 11 Aug 2020 17:16:54 +0200
Subject: [PATCH] Add visual loading indicator

---
 lib/www/client/source/src/views/Map.vue | 27 +++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/lib/www/client/source/src/views/Map.vue b/lib/www/client/source/src/views/Map.vue
index ca4a904..cb83e7c 100644
--- a/lib/www/client/source/src/views/Map.vue
+++ b/lib/www/client/source/src/views/Map.vue
@@ -167,6 +167,16 @@ export default {
     };
   },
 
+  watch: {
+    loading (isLoading) {
+      if (isLoading) {
+        document.getElementById("loadingControl").classList.remove("d-none");
+      } else {
+        document.getElementById("loadingControl").classList.add("d-none");
+      }
+    }
+  },
+
   methods: {
 
     async fitProjectBounds () {
@@ -271,7 +281,24 @@ export default {
     }
 
     fitToBoundsControl({position: "topleft"}).addTo(map);
+
+    const LoadingControl = L.Control.extend({
+      onAdd (map) {
+        const widget = L.DomUtil.create('div');
+        widget.className = "leaflet-touch leaflet-bar leaflet-control d-none";
+        //widget.appendChild(document.getElementById("zoom-fit-best-icon"));
+        widget.innerHTML = `Loading…`;
+        widget.setAttribute("id", "loadingControl");
+        return widget;
+      },
+
+      onRemove (map) {
+      }
+    });
+
+    (new LoadingControl({position: "bottomright"})).addTo(map);
   }
+
 }
 
 </script>