From: Anton Khorev <tony29@yandex.ru>
Date: Sat, 29 Oct 2022 14:33:09 +0000 (+0300)
Subject: Replace spinners in html.erb templates
X-Git-Tag: live~1483^2~1
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/28060080e8ebf3a0609dc2b6853deeae2070df78?ds=sidebyside

Replace spinners in html.erb templates
---

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 9ce1265b4..588c9d85f 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">