Eliminate DOM modification + lots of reflow to show the 'loading' indicator. Fix #208.

app/css/app.css

@@ -2707,3 +2707,90 @@ ce671b orange
   -webkit-transition: margin-top linear 0.2s;
   transition: margin-top linear 0.2s;
 }
+
+.loading_dots
+{
+  display: inline-block;
+  font-size: 1em; /* set size here */
+  line-height: 1;
+  padding: 0.125em 0 0.175em 0.55em;
+  width: 2.75em;
+}
+
+.loading_dots span
+{
+  border-radius: 50%;
+  display: inline-block;
+  height: 0.2rem;
+  width:  0.2rem;
+  margin-left: 0.2rem;
+
+  -webkit-animation:  loading_dots 0.8s linear infinite;
+  -moz-animation:     loading_dots 0.8s linear infinite;
+  -ms-animation:      loading_dots 0.8s linear infinite;
+  animation:          loading_dots 0.8s linear infinite;
+}
+.loading_dots span:nth-child(2)
+{
+  -webkit-animation-delay:  0.2s;
+  -moz-animation-delay:     0.2s;
+  -ms-animation-delay:      0.2s;
+  animation-delay:          0.2s;
+}
+.loading_dots span:nth-child(1)
+{
+  -webkit-animation-delay:  0.4s;
+  -moz-animation-delay:     0.4s;
+  -ms-animation-delay:      0.4s;
+  animation-delay:          0.4s;
+}
+
+@-webkit-keyframes loading_dots
+{
+  0% {
+    background: transparent;
+  }
+  50% {
+    background: #000;
+  }
+  100% {
+    background: transparent;
+  }
+}
+
+@-moz-keyframes loading_dots
+{
+  0% {
+    background: transparent;
+  }
+  50% {
+    background: #000;
+  }
+  100% {
+    background: transparent;
+  }
+}
+@-ms-keyframes loading_dots
+{
+  0% {
+    background: transparent;
+  }
+  50% {
+    background: #000;
+  }
+  100% {
+    background: transparent;
+  }
+}
+@keyframes loading_dots
+{
+  0% {
+    background: transparent;
+  }
+  50% {
+    background: #000;
+  }
+  100% {
+    background: transparent;
+  }
+}

app/js/directives.js

@@ -875,30 +875,9 @@ angular.module('myApp.directives', ['myApp.filters'])
       link: link,
     };
 
-    var interval;
-
     function link ($scope, element, attrs) {
-      var promise = $interval(function () {
-        var time = tsNow(),
-            cnt = 3;
-
-        if (time % 1000 <= 200) {
-          cnt = 0;
-        } else if (time % 1000 <= 400) {
-          cnt = 1;
-        } else if (time % 1000 <= 600) {
-          cnt = 2;
-        }
-
-        var text = '...',
-            html = text.substr(0, cnt + 1) + (cnt < 2 ? ('<span class="text-invisible">' + text.substr(cnt + 1) + '</span>') : '');
-
-        element.html(html);
-      }, 200);
-
-      $scope.$on('$destroy', function cleanup() {
-        $interval.cancel(promise);
-      });
+      element.html('<div class="loading_dots"><span></span>' +
+                   '<span></span><span></span></div>');
     }
   })