From f0d0182256e6eb1242ee0eb2a03e35b3b3d3fa40 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Fri, 15 Aug 2014 11:31:05 +0200
Subject: [PATCH] animated dashed line as loading indicator, instead of a
 spinner, resolves #3

---
 css/style.css        | 24 ++++++++++++++++++++++++
 js/plugin/Routing.js | 20 +++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index baf9b3f..45c6c49 100644
--- a/css/style.css
+++ b/css/style.css
@@ -161,3 +161,27 @@ textarea {
 textarea:focus {
     background-color: rgba(255,255,255,255);
 }
+
+/* dashed line animation, derived from Chris Coyier and others
+   http://css-tricks.com/svg-line-animation-works/
+ */
+.loading-trailer {
+    -webkit-animation: dash 0.4s linear infinite;
+    animation: dash 0.4s linear infinite;
+}
+@-webkit-keyframes dash {
+  from {
+    stroke-dashoffset: 20;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes dash {
+  from {
+    stroke-dashoffset: 20;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
diff --git a/js/plugin/Routing.js b/js/plugin/Routing.js
index dd4fc7b..e246472 100644
--- a/js/plugin/Routing.js
+++ b/js/plugin/Routing.js
@@ -70,11 +70,29 @@ BR.Routing = L.Routing.extend({
   }
 
   ,_routeSegment: function(m1, m2, cb) {
+    var loadingTrailer;
+
     // change segment color before request to indicate recalculation (mark old)
     if (m1 && m1._routing.nextLine !== null) {
         m1._routing.nextLine.options.color = 'dimgray';
         m1._routing.nextLine._updateStyle();
     }
-    L.Routing.prototype._routeSegment.call(this, m1, m2, cb);
+
+    // animate dashed trailer as loading indicator
+    if (m1 && m2) {
+        loadingTrailer = new L.Polyline([m1.getLatLng(), m2.getLatLng()], {
+            opacity: 0.6,
+            dashArray: [10, 10],
+            className: 'loading-trailer'
+        });
+        loadingTrailer.addTo(this._map);
+    }
+
+    L.Routing.prototype._routeSegment.call(this, m1, m2, L.bind(function(err, data) {
+        if (loadingTrailer) {
+            this._map.removeLayer(loadingTrailer);
+        }
+        cb(err, data);
+    }, this));
   }
 });