Map Data asynchronous checkbox

app/assets/javascripts/index/layers/data.js

@@ -89,6 +89,15 @@ OSM.initializeDataLayer = function (map) {
 
     if (dataLoader) dataLoader.abort();
 
+    $("#layers-data-loading").remove();
+
+    const spanLoading = $("<span>")
+      .attr("id", "layers-data-loading")
+      .attr("class", "spinner-border spinner-border-sm ms-1")
+      .attr("role", "status")
+      .html("<span class='visually-hidden'>" + I18n.t("browse.start_rjs.loading") + "</span>")
+      .appendTo($("#label-layers-data"));
+
     dataLoader = new AbortController();
     fetch(url, { signal: dataLoader.signal })
       .then(response => {
@@ -131,7 +140,10 @@ OSM.initializeDataLayer = function (map) {
           $("#browse_status").empty();
         });
       })
-      .finally(() => dataLoader = null);
+      .finally(() => {
+        dataLoader = null;
+        spanLoading.remove();
+      });
   }
 
   function onSelect(layer) {

app/assets/javascripts/leaflet.layers.js

@@ -100,6 +100,7 @@ L.OSM.layers = function (options) {
 
         const label = $("<label>")
           .attr("class", "form-check-label")
+          .attr("id", `label-layers-${name}`)
           .appendTo(item);
 
         let checked = map.hasLayer(layer);
@@ -114,10 +115,15 @@ L.OSM.layers = function (options) {
 
         input.on("change", function () {
           checked = input.is(":checked");
+          if (layer.cancelLoading) {
+            layer.cancelLoading();
+          }
+
           if (checked) {
             map.addLayer(layer);
           } else {
             map.removeLayer(layer);
+            $(`#layers-${name}-loading`).remove();
           }
         });
 

app/assets/javascripts/leaflet.map.js

@@ -47,7 +47,7 @@ L.OSM.Map = L.Map.extend({
     this.noteLayer = new L.FeatureGroup();
     this.noteLayer.options = { code: "N" };
 
-    this.dataLayer = new L.OSM.DataLayer(null);
+    this.dataLayer = new L.OSM.DataLayer(null, { asynchronous: true });
     this.dataLayer.options.code = "D";
 
     this.gpsLayer = new L.OSM.GPS({
@@ -306,7 +306,8 @@ L.OSM.Map = L.Map.extend({
               way: objectStyle,
               area: objectStyle,
               changeset: changesetStyle
-            }
+            },
+            asynchronous: true
           });
 
           map._objectLayer.interestingNode = function (node, wayNodes, relationNodes) {

vendor/assets/leaflet/leaflet.osm.js

@@ -104,6 +104,13 @@ L.OSM.DataLayer = L.FeatureGroup.extend({
     }
   },
 
+  loadingLayers: [],
+
+  cancelLoading: function () {
+    this.loadingLayers.forEach(layer => clearTimeout(layer));
+    this.loadingLayers = [];
+  },
+
   addData: function (features) {
     if (!(features instanceof Array)) {
       features = this.buildFeatures(features);
@@ -220,9 +227,11 @@ L.OSM.DataLayer = L.FeatureGroup.extend({
   eachLayer: function (method, context, asynchronous = false) {
     for (let i in this._layers) {
       if (asynchronous) {
-        setTimeout(() => {
-          method.call(context, this._layers[i]);
-        });
+        this.loadingLayers.push(
+          setTimeout(() => {
+            method.call(context, this._layers[i]);
+          })
+        );
       } else {
         method.call(context, this._layers[i]);
       }