Add visual loading indicator

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>