From 2275129ff4dcbe843806297e4386d27af3fbd3e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Kl=C3=BCnder?= <laura@codingcatgirl.de>
Date: Wed, 15 Nov 2017 16:39:42 +0100
Subject: [PATCH] show loader gif while sidebar is loading

---
 src/c3nav/site/static/site/css/c3nav.css | 16 ++++++++++++----
 src/c3nav/site/static/site/js/c3nav.js   |  2 ++
 src/c3nav/site/templates/site/map.html   |  2 +-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/c3nav/site/static/site/css/c3nav.css b/src/c3nav/site/static/site/css/c3nav.css
index cd705cd2..493271ce 100644
--- a/src/c3nav/site/static/site/css/c3nav.css
+++ b/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;
diff --git a/src/c3nav/site/static/site/js/c3nav.js b/src/c3nav/site/static/site/js/c3nav.js
index d75cc79d..a1bd8994 100644
--- a/src/c3nav/site/static/site/js/c3nav.js
+++ b/src/c3nav/site/static/site/js/c3nav.js
@@ -47,6 +47,8 @@ c3nav = {
             }
         }
 
+        $('#search').removeClass('loading');
+
         c3nav.narrow = ($(document).width() < 1000);
 
         c3nav.init_locationinputs();
diff --git a/src/c3nav/site/templates/site/map.html b/src/c3nav/site/templates/site/map.html
index f5230309..e0bed4f6 100644
--- a/src/c3nav/site/templates/site/map.html
+++ b/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…' %}">