show loader gif while sidebar is loading

src/c3nav/site/static/site/css/c3nav.css

@@ -78,25 +78,33 @@ main.map {
     border-top-width: 1px;
     transition: margin-bottom 150ms, opacity 150ms;
     overflow: hidden;
+    background-color: #ffffff;
 }
 #sidebar section > div:first-child {
     margin-top: -1px;
 }
 
 #search {
-    transition: margin-bottom 150ms, opacity 150ms;
     z-index: 4;
+    min-height: 54px;
+    background: url('../../img/loader.gif') no-repeat 4px 3px;
+    min-width: 54px;
+    width: 100%;
+    transition: width 150ms;
+}
+#search.loading {
+    width: 5%;
 }
 
-
-main:not([data-view^=route]) #origin-input {
+main:not([data-view^=route]) #origin-input,
+#search.loading #destination-input {
     margin-bottom: -55px;
     pointer-events: none;
     opacity: 0;
 }
 main:not([data-view=location]) #location-buttons,
 main:not([data-view=route-search]) #route-search-buttons,
-main:not([data-view=route-result]) #route-result-buttons{
+main:not([data-view=route-result]) #route-result-buttons {
     margin-bottom: -3.3rem;
     pointer-events: none;
     opacity: 0;

src/c3nav/site/static/site/js/c3nav.js

@@ -47,6 +47,8 @@ c3nav = {
             }
         }
 
+        $('#search').removeClass('loading');
+
         c3nav.narrow = ($(document).width() < 1000);
 
         c3nav.init_locationinputs();

src/c3nav/site/templates/site/map.html

@@ -29,7 +29,7 @@
         </section>
         <section id="map" data-bounds="{{ bounds }}" data-levels="{{ levels }}"></section>
         <section id="sidebar">
-            <section id="search">
+            <section id="search" class="loading">
                 <div class="location locationinput empty" id="origin-input">
                     <i class="icon material-icons">place</i>
                     <input type="text" autocomplete="off" spellcheck="false" placeholder="{% trans 'Search any location…' %}">