From 5afe47e3f63031f4ec86156ca63596b90af5197e Mon Sep 17 00:00:00 2001
From: Matt Amos <zerebubuth@gmail.com>
Date: Mon, 26 Jan 2015 17:18:32 +0000
Subject: [PATCH] Use larger 'spinner' when waiting for route request. Replace
 HTML in content to avoid resize.

---
 app/assets/javascripts/index/directions.js.erb | 10 +++++-----
 app/views/layouts/_search.html.erb             |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/index/directions.js.erb b/app/assets/javascripts/index/directions.js.erb
index 3e2251b7a..a8f4feb78 100644
--- a/app/assets/javascripts/index/directions.js.erb
+++ b/app/assets/javascripts/index/directions.js.erb
@@ -166,14 +166,16 @@ OSM.Directions = function (map) {
              d.lat.toFixed(precision) + ',' + d.lng.toFixed(precision)
     }));
 
-    $(".directions_form .spinner").show();
+    // copy loading item to sidebar and display it. we copy it, rather than
+    // just using it in-place and replacing it in case it has to be used
+    // again.
+    $('#sidebar_content').html($('.directions_form .loader_copy').html());
     awaitingRoute = true;
+    map.setSidebarOverlaid(false);
 
     chosenEngine.getRoute([o, d], function (err, route) {
       awaitingRoute = false;
 
-      $(".directions_form .spinner").hide();
-
       if (err) {
         map.removeLayer(polyline);
 
@@ -188,8 +190,6 @@ OSM.Directions = function (map) {
         .setLatLngs(route.line)
         .addTo(map);
 
-      map.setSidebarOverlaid(false);
-
       if (!dragging) {
         map.fitBounds(polyline.getBounds().pad(0.05));
       }
diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
index 5b6806e3d..441ea3212 100644
--- a/app/views/layouts/_search.html.erb
+++ b/app/views/layouts/_search.html.erb
@@ -21,6 +21,6 @@
     </div>
     <select class='routing_engines' name='routing_engines'></select>
     <div width="100%" align="right"><%= submit_tag t('site.search.submit_text') %></div>
-    <%= image_tag "searching-small.gif", :class => 'spinner', :style => "vertical-align: middle; display: none;" %>
+    <div class="loader_copy" style="display:none;"><div class="loader"><%= image_tag "searching.gif", :style => "vertical-align: middle;" %></div></div>
   </form>
 </div>
-- 
2.39.5