X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/432fa57e61c5535eb955ee50529aa43b18787fe4..83b42a8b75adbb6bc310a2f23ba1b89a65beffeb:/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 8925cc480..c0fffd72d 100644
--- a/app/assets/javascripts/index/layers/data.js
+++ b/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) {