Add css loader for logs viewer

static/js/controllers/logsController.js

@@ -15,6 +15,7 @@
 
             //reset
             $rootScope.sidebar = false;
+
             /**
              * attachCurrentFiles
              *
@@ -43,12 +44,13 @@
 
                 $scope.currentFiles.forEach(function (file) {
 
-                    $scope.lines = [];
-
                     if (file.selected) {
                         ScribeAPI.log({
                             path : file.path
                         }, function (data) {
+                            if (!Array.isArray($scope.lines)) {
+                                $scope.lines = [];
+                            }
                             $scope.lines = $scope.lines.concat(data);
                         });
                     }
@@ -84,7 +86,7 @@
             $scope.showTags = 1;
 
             //Stores all lines (a line = a log)
-            $scope.lines = [];
+            $scope.lines = false;
 
             //default order by time
             $scope.order   = "context.time";
@@ -113,6 +115,7 @@
              * @type {Function}
              */
             $scope.reload = function () {
+                $scope.lines = false;
                 attachCurrentFiles(logs.getLogs());
                 getCurrentLogs();
             };
@@ -127,6 +130,7 @@
             //watch current files for changes
             //as user can select / unselect files in sidebar
             $scope.$watch('currentFiles', function (value, old) {
+                $scope.lines = false;
                 if (value !== old) {
                     getCurrentLogs();
                 }

static/partials/logs.html

@@ -16,7 +16,15 @@
             ></log>
     </div>
 
-    <div class="logs__empty" ng-if="lines.length == 0">
+    <div class="logs__loader sk-spinner sk-spinner-wave" ng-if="lines === false">
+        <div class="sk-rect1"></div>
+        <div class="sk-rect2"></div>
+        <div class="sk-rect3"></div>
+        <div class="sk-rect4"></div>
+        <div class="sk-rect5"></div>
+    </div>
+
+    <div class="logs__empty" ng-if="lines !== false && lines.length == 0">
         <h1>Select file(s) from</h1>
         <h1>sidebar to display</h1>
     </div>

static/style.css

@@ -517,7 +517,7 @@ body {
         white-space: pre-wrap;
         border-left: 1px solid #222;
     }
-.logs__empty {
+.logs__empty, .logs__loader {
     text-align: center;
     width: 100%;
     color: #e2e2e2;
@@ -537,6 +537,7 @@ body {
         line-height: 12px;
 }
 
+
 /**
  * ngToggle
  */
@@ -800,3 +801,51 @@ button.toggle-button.active {
 .log__time_122 {
     min-width: 122px;
 }
+
+/*
+ * Loader
+ * @see https://github.com/tobiasahlin/SpinKit
+ */
+.sk-spinner-wave.sk-spinner {
+  margin: 0 auto;
+  width: 50px;
+  height: 30px;
+  text-align: center;
+  font-size: 10px; }
+.sk-spinner-wave div {
+  background-color: #333;
+  height: 100%;
+  width: 6px;
+  display: inline-block;
+  -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
+          animation: sk-waveStretchDelay 1.2s infinite ease-in-out; }
+.sk-spinner-wave .sk-rect2 {
+  -webkit-animation-delay: -1.1s;
+          animation-delay: -1.1s; }
+.sk-spinner-wave .sk-rect3 {
+  -webkit-animation-delay: -1s;
+          animation-delay: -1s; }
+.sk-spinner-wave .sk-rect4 {
+  -webkit-animation-delay: -0.9s;
+          animation-delay: -0.9s; }
+.sk-spinner-wave .sk-rect5 {
+  -webkit-animation-delay: -0.8s;
+          animation-delay: -0.8s; }
+
+@-webkit-keyframes sk-waveStretchDelay {
+  0%, 40%, 100% {
+    -webkit-transform: scaleY(0.4);
+            transform: scaleY(0.4); }
+
+  20% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1); } }
+
+@keyframes sk-waveStretchDelay {
+  0%, 40%, 100% {
+    -webkit-transform: scaleY(0.4);
+            transform: scaleY(0.4); }
+
+  20% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1); } }