From: Tom Hughes <tom@compton.nu>
Date: Wed, 16 Nov 2022 18:12:29 +0000 (+0000)
Subject: Merge remote-tracking branch 'upstream/pull/3800'
X-Git-Tag: live~1797
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/63c1ade01a70afe87493fb774e691273e5bb222d?hp=aab33eee8701be8a10d3446d36f5ad689228a236

Merge remote-tracking branch 'upstream/pull/3800'
---

diff --git a/app/assets/images/searching.gif b/app/assets/images/searching.gif
deleted file mode 100644
index b1451fd7d..000000000
Binary files a/app/assets/images/searching.gif and /dev/null differ
diff --git a/app/assets/javascripts/osm.js.erb b/app/assets/javascripts/osm.js.erb
index 352f5d48c..89f14caee 100644
--- a/app/assets/javascripts/osm.js.erb
+++ b/app/assets/javascripts/osm.js.erb
@@ -35,8 +35,6 @@ OSM = {
   OPEN_NOTE_MARKER:        <%= image_path("open_note_marker.png").to_json %>,
   CLOSED_NOTE_MARKER:      <%= image_path("closed_note_marker.png").to_json %>,
 
-  SEARCHING:               <%= image_path("searching.gif").to_json %>,
-
   apiUrl: function (object) {
     var apiType = object.type === "note" ? "notes" : object.type;
     var url = "/api/" + OSM.API_VERSION + "/" + apiType + "/" + object.id;
diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js
index 8e4410fce..14da8f300 100644
--- a/app/assets/javascripts/user.js
+++ b/app/assets/javascripts/user.js
@@ -123,7 +123,7 @@ $(document).ready(function () {
   $("input[name=legale]").change(function () {
     var url = $(this).data("url");
 
-    $("#contributorTerms").html("<img src='" + OSM.SEARCHING + "' />");
+    $("#contributorTerms").html("<div class='spinner-border' role='status'><span class='visually-hidden'>" + I18n.t("browse.start_rjs.loading") + "</span></div>");
     $("#contributorTerms").load(url);
   });
 
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 27458c6ef..5a197d9b1 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -681,21 +681,6 @@ body.small-nav {
   }
 }
 
-#sidebar {
-  #sidebar_loader,
-  .search_more {
-    width: 100%;
-    margin: $lineheight auto;
-  }
-
-  .loader {
-    text-align: center;
-    margin: auto;
-    width: 40px;
-    display: block;
-  }
-}
-
 /* Temporary label size override until we remove site-wide font customisation */
 
 form {
@@ -753,7 +738,6 @@ header .search_forms,
 
   .search_more .loader {
     display: none;
-    width: 100%;
   }
 }
 
@@ -1336,14 +1320,6 @@ tr.turn:hover {
 
 .directions_form {
   background-color: $lightgrey;
-
-  .loader_copy {
-    display: none;
-
-    img {
-      vertical-align: middle;
-    }
-  }
 }
 
 /* Rules for user images */
diff --git a/app/views/browse/query.html.erb b/app/views/browse/query.html.erb
index 53eca9747..25b0cac14 100644
--- a/app/views/browse/query.html.erb
+++ b/app/views/browse/query.html.erb
@@ -8,7 +8,11 @@
 
 <div id="query-nearby" class="query-results">
   <h3><%= t(".nearby") %></h3>
-  <%= image_tag "searching.gif", :class => "loader" %>
+  <div class="text-center loader">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+    </div>
+  </div>
   <div class="mx-n3">
     <ul class="query-results-list list-group list-group-flush"></ul>
   </div>
@@ -16,7 +20,11 @@
 
 <div id="query-isin" class="query-results">
   <h3><%= t(".enclosing") %></h3>
-  <%= image_tag "searching.gif", :class => "loader" %>
+  <div class="text-center loader">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+    </div>
+  </div>
   <div class="mx-n3">
     <ul class="query-results-list list-group list-group-flush"></ul>
   </div>
diff --git a/app/views/changesets/history.html.erb b/app/views/changesets/history.html.erb
index b601057f6..b11453958 100644
--- a/app/views/changesets/history.html.erb
+++ b/app/views/changesets/history.html.erb
@@ -14,5 +14,9 @@
 <%= render "sidebar_header", :title => @heading %>
 
 <div class="changesets mx-n3">
-  <%= image_tag "searching.gif", :class => "loader" %>
+  <div class="text-center loader">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+    </div>
+  </div>
 </div>
diff --git a/app/views/changesets/index.html.erb b/app/views/changesets/index.html.erb
index 3ead2abda..43f194522 100644
--- a/app/views/changesets/index.html.erb
+++ b/app/views/changesets/index.html.erb
@@ -5,7 +5,11 @@
 <% if @changesets.size == 20 -%>
   <div class="changeset_more mt-3 text-center">
     <%= link_to t(".load_more"), url_for(@params.merge(:max_id => @changesets.last.id - 1)), :class => "btn btn-primary" %>
-    <div class="loader"><%= image_tag "searching.gif" %></div>
+    <div class="text-center loader">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+      </div>
+    </div>
   </div>
 <% end -%>
 <% elsif params[:bbox] %>
diff --git a/app/views/geocoder/results.html.erb b/app/views/geocoder/results.html.erb
index e05aa29ad..fc2138318 100644
--- a/app/views/geocoder/results.html.erb
+++ b/app/views/geocoder/results.html.erb
@@ -11,9 +11,13 @@
     <% end %>
   </ul>
   <% if @more_params %>
-    <div class="search_more text-center">
+    <div class="search_more text-center my-3">
       <%= link_to t(".more_results"), url_for(@more_params), :class => "btn btn-primary" %>
-      <div class="loader"><%= image_tag "searching.gif" %></div>
+      <div class="text-center loader">
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+        </div>
+      </div>
     </div>
   <% end %>
 <% end %>
diff --git a/app/views/geocoder/search.html.erb b/app/views/geocoder/search.html.erb
index 8502227de..ceb099421 100644
--- a/app/views/geocoder/search.html.erb
+++ b/app/views/geocoder/search.html.erb
@@ -5,6 +5,10 @@
 <% @sources.each do |source| %>
   <h4><%= t(".title.#{source}_html") %></h4>
   <div class="search_results_entry mx-n3" data-href="<%= url_for @params.merge(:action => "search_#{source}") %>">
-    <%= image_tag "searching.gif", :class => "loader" %>
+    <div class="text-center loader">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+      </div>
+    </div>
   </div>
 <% end %>
diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
index e7cae0471..31386b1ab 100644
--- a/app/views/layouts/_search.html.erb
+++ b/app/views/layouts/_search.html.erb
@@ -51,6 +51,12 @@
       </div>
     </div>
 
-    <div class="loader_copy"><div class="loader"><%= image_tag "searching.gif" %></div></div>
+    <div class="loader_copy d-none">
+      <div class="text-center loader">
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+        </div>
+      </div>
+    </div>
   </form>
 </div>
diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index 816f90c70..b3c85d918 100644
--- a/app/views/layouts/map.html.erb
+++ b/app/views/layouts/map.html.erb
@@ -30,8 +30,10 @@
 
     <div id="browse_status"></div>
 
-    <div id="sidebar_loader">
-      <img alt="<%= t("browse.start_rjs.loading") %>" class="loader" src="<%= image_path("searching.gif") %>">
+    <div id="sidebar_loader" class="my-3 text-center loader">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+      </div>
     </div>
 
     <div id="sidebar_content">