From 2e51408b60b709111bf3dc0da797e6299fd625d8 Mon Sep 17 00:00:00 2001
From: imaustink <austin@austinkurpuis.com>
Date: Thu, 31 Aug 2017 15:40:23 -0700
Subject: [PATCH] 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.

closes #392
---
 static/loading-bar.js | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/static/loading-bar.js b/static/loading-bar.js
index 73293c7e..55a3de84 100644
--- a/static/loading-bar.js
+++ b/static/loading-bar.js
@@ -1,5 +1,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 +10,32 @@ function LoadingBar(color, parent) {
   return this;
 }
 
-LoadingBar.prototype.start = function(percentage) {
-  percentage = percentage || 0;
-  this.meter.css('width', percentage + '%');
+LoadingBar.prototype.start = function(progress) {
+  progress = progress || 5;
+  this.clearTimer();
+  this.meter.css('width', progress + '%');
   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.clearTimer();
+  this.meter.css('width', progress + '%');
+  if(progress === 100){
+    this.timer = setTimeout(function(){
+      this.elem.hide();
+    }.bind(this), 500);
+  }
+};
+
+LoadingBar.prototype.clearTimer = function(){
+  if(this.timer){
+    clearTimeout(this.timer);
+    this.timer = null;
+  }
 };
 
 module.exports = LoadingBar;