Fix bug preventing loading indicator from showing

Since we have a CSS animation on the width of the bar, and on a fast network the progress event usaully only fires once (at 100%), hiding the loading indicator eminently after calling `.end()` would not allow the animation to complete before the bar hidden.

This PR adds a timer to wait for the CSS animation before hiding the bar.

Author: imaustink

static/loading-bar.js

@@ -1,27 +1,41 @@
 function LoadingBar(color, parent) {
-  this.meter = $('<span>', {style: 'transition: width 1s ease; width:0%;'});
+  this.meter = $('<span>', {style: 'transition: width 0.5s ease; width:0%;'});
   this.elem = $('<div>', {style: 'display:none', class: 'meter animate ' + color}).append(
     this.meter.append($('<span>'))
   );
+  this.progress = 5;
 
   parent = parent || $('body');
   parent.prepend(this.elem);
 
   return this;
 }
 
-LoadingBar.prototype.start = function(percentage) {
-  percentage = percentage || 0;
-  this.meter.css('width', percentage + '%');
+LoadingBar.prototype.start = function(progress) {
+  if(progress) {
+    this.progress = progress;
+  }
+  console.log('start', this.progress);
+  this.meter.css('width', this.progress + '%');
   this.elem.show();
 };
 
 LoadingBar.prototype.end = function() {
-  this.elem.hide();
+  console.log('end', this.progress);
+  this.update(100);
+  this.progress = 0;
 };
 
-LoadingBar.prototype.update = function(percentage) {
-  this.meter.css('width', percentage + '%');
+LoadingBar.prototype.update = function(progress) {
+  this.progress = progress;
+  console.log('update', this.progress);
+  this.meter.css('width', this.progress + '%');
+  if(this.progress === 100){
+    setTimeout(function(){
+      console.log('hide');
+      this.elem.hide();
+    }.bind(this), 500);
+  }
 };
 
 module.exports = LoadingBar;