Ejegg has submitted this change and it was merged.
Change subject: Add loader gif
......................................................................
Add loader gif
edit: fix jslint complaint
edit: make more knockout-y
Change-Id: Ib1e890814a55b580c78478bd1ab8f50db3e94ebf
---
M src/components/boards/bigEnglish/bigEnglishBoard.html
M src/components/boards/bigEnglish/bigEnglishBoard.js
M src/css/style.css
A src/images/catloader.gif
4 files changed, 58 insertions(+), 0 deletions(-)
Approvals:
Ejegg: Looks good to me, approved
diff --git a/src/components/boards/bigEnglish/bigEnglishBoard.html
b/src/components/boards/bigEnglish/bigEnglishBoard.html
index 323f6d2..b0fa215 100644
--- a/src/components/boards/bigEnglish/bigEnglishBoard.html
+++ b/src/components/boards/bigEnglish/bigEnglishBoard.html
@@ -12,6 +12,13 @@
</div>
</div>
+<span data-bind="if: dataLoading">
+ <div class="loading">
+ <img src="/images/catloader.gif" />
+ <div>Loading Dash<span class="ellipsis" data-bind="text:
ellipsis"></span></div>
+ </div>
+</span>
+
<div class="row">
<div class="panel panel-transparent">
<div class="panel-body">
diff --git a/src/components/boards/bigEnglish/bigEnglishBoard.js
b/src/components/boards/bigEnglish/bigEnglishBoard.js
index 5209139..e3cd86f 100644
--- a/src/components/boards/bigEnglish/bigEnglishBoard.js
+++ b/src/components/boards/bigEnglish/bigEnglishBoard.js
@@ -11,6 +11,8 @@
var self = this,
timeFormat = "dddd, MMMM Do YYYY, h:mm:ss a";
+ self.dataLoading = ko.observable(true);
+
// Get the date
self.displayDate = ko.observable( moment().format( timeFormat ) );
@@ -45,6 +47,32 @@
// goal has been reset. So the total remaining is a good proxy
return self.totalRemainingToDate();
});
+
+ //todo: this could go elsewhere
+ self.ellipsis = ko.observable('');
+ self.ellipsisObj = {
+ 'value' : ['', '.', '..', '...', '....'],
+ 'count' : 0,
+ 'run' : false,
+ 'timer' : null,
+ 'element' : '.ellipsis',
+ 'start' : function () {
+ var t = this;
+ this.run = true;
+ this.timer = setInterval(function () {
+ if (t.run) {
+ self.ellipsis(t.value[t.count % t.value.length]);
+ t.count++;
+ }
+ }, 400);
+ },
+ 'stop' : function () {
+ this.run = false;
+ clearInterval(this.timer);
+ this.count = 0;
+ }
+ };
+ self.ellipsisObj.start();
// Only recalculate child boards once per half second
self.dataChanged.extend( { rateLimit: 500 } );
@@ -91,12 +119,14 @@
// Reload the data. For the automatic reload, we're fine
getting
// something from the cache.
self.reloadBigEnglish = function( automatic ){
+ self.dataLoading(true);
var url = '/data/big-english';
if ( automatic !== true ) {
url += '/?cache=false';
}
$.get( url , function ( dataget ) {
self.loadData( dataget.results,
dataget.timestamp );
+ self.dataLoading(false);
});
// Do it every 5 minutes as well
setTimeout( function () {
diff --git a/src/css/style.css b/src/css/style.css
index e60c807..92a7c30 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -438,4 +438,25 @@
#distanceToGoalChart {
padding: 0 9px 0 0;
+}
+
+.loading {
+ position: fixed;
+ top: 360px;
+ left: 50%;
+ margin-top: -96px;
+ margin-left: -96px;
+ background-color: #5bc0de;
+ opacity: .85;
+ border-radius: 25px;
+ width: 192px;
+ height: 192px;
+ padding: 37px;
+ color: #ffffff;
+ z-index: 99999;
+ font-size: 110%;
+}
+
+.loading div {
+ margin-left: 10px;
}
\ No newline at end of file
diff --git a/src/images/catloader.gif b/src/images/catloader.gif
new file mode 100644
index 0000000..6ef0dbf
--- /dev/null
+++ b/src/images/catloader.gif
Binary files differ
--
To view, visit https://gerrit.wikimedia.org/r/179200
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ib1e890814a55b580c78478bd1ab8f50db3e94ebf
Gerrit-PatchSet: 6
Gerrit-Project: wikimedia/fundraising/dash
Gerrit-Branch: master
Gerrit-Owner: Ssmith <[email protected]>
Gerrit-Reviewer: Ejegg <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
