From d9d077fac4d3fd365718fc261b2100a751fe0f22 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.
---
 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..b1eb7d8f 100644
--- a/static/loading-bar.js
+++ b/static/loading-bar.js
@@ -1,8 +1,9 @@
 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);
@@ -10,18 +11,31 @@ 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(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;