Hide loader spinner when sidebar content is not displayed

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);

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;
     }

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>