Hide loader spinner when sidebar content is not displayed

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index cbb6afafe428bc5f645095f13d3295b087a03d52..b79c3308888904bfb02b6457a6de7775e42c64fb 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -37,7 +37,7 @@ $(function () {
 
     map.setSidebarOverlaid(false);
 
-    $("#sidebar_loader").show().addClass("delayed-fade-in");
+    $("#sidebar_loader").prop("hidden", false).addClass("delayed-fade-in");
 
     // Prevent caching the XHR response as a full-page URL
     // https://github.com/openstreetmap/openstreetmap-website/issues/5663
@@ -53,7 +53,7 @@ $(function () {
     fetch(content_path, { headers: { "accept": "text/html", "x-requested-with": "XMLHttpRequest" } })
       .then(response => {
         $("#flash").empty();
-        $("#sidebar_loader").removeClass("delayed-fade-in").hide();
+        $("#sidebar_loader").removeClass("delayed-fade-in").prop("hidden", true);
 
         const title = response.headers.get("X-Page-Title");
         if (title) document.title = decodeURIComponent(title);

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index c1728f870220b78a4229a10a9fc2b118d0d14fe0..a2e54ec6d65af67471a541eda2ac1eb654cd38c8 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -336,10 +336,6 @@ body.small-nav {
   #sidebar {
     float: left;
     width: $sidebarWidth;
-
-    #sidebar_loader {
-      display: none;
-    }
   }
 
   .overlay-sidebar #sidebar {
@@ -355,6 +351,7 @@ body.small-nav {
       display: block;
     }
 
+    #sidebar_loader,
     #sidebar_content {
       display: none;
     }

diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index 72f6076b45850999df682013efd1b0e9e60b2aa5..eeb6d7472d92ba8edce37b949427745d42d6f28b 100644 (file)
--- a/app/views/layouts/map.html.erb
+++ b/app/views/layouts/map.html.erb
@@ -18,7 +18,7 @@
 
     <div id="browse_status"></div>
 
-    <div id="sidebar_loader" class="my-3 text-center loader">
+    <div id="sidebar_loader" class="my-3 text-center loader" hidden>
       <div class="spinner-border" role="status">
         <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
       </div>