Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix bug preventing loading indicator from showing #393

Merged
merged 1 commit into from
Sep 2, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
  • Loading branch information
imaustink committed Sep 2, 2017
commit 2e51408b60b709111bf3dc0da797e6299fd625d8
28 changes: 21 additions & 7 deletions static/loading-bar.js
Original file line number Diff line number Diff line change
@@ -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;