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,5 +1,7 @@
+var starting = 5;
+
 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>'))
   );
@@ -10,18 +12,27 @@ function LoadingBar(color, parent) {
   return this;
 }
 
-LoadingBar.prototype.start = function(percentage) {
-  percentage = percentage || 0;
-  this.meter.css('width', percentage + '%');
+LoadingBar.prototype.start = function(progress) {
+  if(this.timer){
+    clearTimeout(this.timer);
+    this.timer = null;
+  }
+  this.meter.css('width', progress || starting + '%');
   this.elem.show();
 };
 
 LoadingBar.prototype.end = function() {
-  this.elem.hide();
+  this.update(100);
 };
 
-LoadingBar.prototype.update = function(percentage) {
-  this.meter.css('width', percentage + '%');
+LoadingBar.prototype.update = function(progress) {
+  this.meter.css('width', progress + '%');
+  if(progress === 100){
+    this.timer = setTimeout(function(){
+      console.log('hide');
+      this.elem.hide();
+    }.bind(this), 500);
+  }
 };
 
 module.exports = LoadingBar;