X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/aebacc88de18c24c583a12b589eb98cf0b826627..ce63209f326d90ae07367008a78a7af9b812021c:/app/assets/javascripts/index/layers/data.js

diff --git a/app/assets/javascripts/index/layers/data.js b/app/assets/javascripts/index/layers/data.js
index 25dc66a28..c0fffd72d 100644
--- a/app/assets/javascripts/index/layers/data.js
+++ b/app/assets/javascripts/index/layers/data.js
@@ -40,7 +40,7 @@ OSM.initializeDataLayer = function (map) {
   });
 
   function updateData() {
-    var bounds = map.getBounds();
+    const bounds = map.getBounds();
     if (!loadedBounds || !loadedBounds.contains(bounds)) {
       getData();
     }
@@ -78,8 +78,8 @@ OSM.initializeDataLayer = function (map) {
   }
 
   function getData() {
-    var bounds = map.getBounds();
-    var url = "/api/" + OSM.API_VERSION + "/map.json?bbox=" + bounds.toBBoxString();
+    const bounds = map.getBounds();
+    const url = "/api/" + OSM.API_VERSION + "/map.json?bbox=" + bounds.toBBoxString();
 
     /*
      * Modern browsers are quite happy showing far more than 100 features in
@@ -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 => {
@@ -102,7 +111,7 @@ OSM.initializeDataLayer = function (map) {
       .then(function (data) {
         dataLayer.clearLayers();
 
-        var features = dataLayer.buildFeatures(data);
+        const features = dataLayer.buildFeatures(data);
 
         function addFeatures() {
           $("#browse_status").empty();
@@ -131,7 +140,10 @@ OSM.initializeDataLayer = function (map) {
           $("#browse_status").empty();
         });
       })
-      .finally(() => dataLoader = null);
+      .finally(() => {
+        dataLoader = null;
+        spanLoading.remove();
+      });
   }
 
   function onSelect(layer) {