Add a progress bar on the UI

front/src/css/queue.css

@@ -6,3 +6,16 @@
   font-size: 0.8em;
   margin-bottom: 6em;
 }
+.progressBarEmpty {
+  width: 90%;
+  max-width: 300px;
+  margin: 1em auto;
+  padding: 0.05em;
+  border: 1px solid #ffa319;
+}
+.progressBarFilled {
+  width: 5%;
+  height: 0.5em;
+  background: #ffa319;
+  transition: width 2s ease-out;
+}

front/src/js/controllers/queueCtrl.js

@@ -9,15 +9,22 @@ queueCtrl.controller('QueueCtrl', ['$scope', '$routeParams', '$location', 'Runs'
         Runs.get({runId: $scope.runId}, function(data) {
             $scope.url = data.params.url;
             $scope.status = data.status;
+            $scope.progress = data.progress;
             $scope.notFound = false;
             $scope.connectionLost = false;
 
-            if (data.status.statusCode === 'running' || data.status.statusCode === 'awaiting') {
+            if (data.status.statusCode === 'awaiting') {
                 numberOfTries ++;
 
-                // Retrying in 2 seconds (and increasing the delay a bit more each time)
+                // Retrying every 2 seconds (and increasing the delay a bit more each time)
                 setTimeout(getRunStatus, 2000 + (numberOfTries * 100));
 
+            } else if (data.status.statusCode === 'running') {
+                numberOfTries ++;
+
+                // Retrying every second or so
+                setTimeout(getRunStatus, 1000 + (numberOfTries * 10));
+
             } else if (data.status.statusCode === 'complete') {
                 $location.path('/result/' + $scope.runId).replace();
             } else {

front/src/less/queue.less

@@ -6,4 +6,19 @@
 .statusSubMessage {
     font-size: 0.8em;
     margin-bottom: 6em;
+}
+
+.progressBarEmpty {
+    width: 90%;
+    max-width: 300px;
+    margin: 1em auto;
+    padding: 0.05em;
+    border: 1px solid #ffa319;
+}
+
+.progressBarFilled {
+    width: 5%;
+    height: 0.5em;
+    background: #ffa319;
+    transition: width 2s ease-out;
 }

front/src/views/queue.html

@@ -17,7 +17,16 @@
     </div>
     <div ng-if="status.statusCode == 'running'">
         <div class="status">Test is running...</div>
-        <p class="statusSubMessage">(auto-refresh activated)</p>
+        <div class="progress">
+            <div class="progressBarEmpty">
+                <div class="progressBarFilled" ng-style="{'width': (progress.estimatedProgress*100) + '%'}"></div>
+            </div>
+        </div>
+        <p class="statusSubMessage" ng-if="!progress">(Phantomas launched)</p>
+        <p class="statusSubMessage" ng-if="progress.milestone == 'domReady'">(DOM Ready fired)</p>
+        <p class="statusSubMessage" ng-if="progress.milestone == 'domComplete'">(page loaded, waiting for late requests)</p>
+        <p class="statusSubMessage" ng-if="progress.milestone == 'phantomas'">(now simulating compression, optimization and minification)</p>
+        <p class="statusSubMessage" ng-if="progress.milestone == 'redownload'">(calculating score and retreaving screenshot)</p>
     </div>
     <div ng-if="status.statusCode == 'complete'">
         <div class="status">Test complete</div>