jenkins-bot has submitted this change and it was merged.
Change subject: Add loading state to flyout.
......................................................................
Add loading state to flyout.
Upon clicking the recommendations link the flyout immediately opens
and displays a spinner until completion of api request.
Change-Id: Idf091a98e108e577cbc57563c8f8540964b2bfef
---
A resources/lightbulb/images/ajax-loader-2x.gif
A resources/lightbulb/images/ajax-loader.gif
M resources/lightbulb/lightbulb.flyout.js
M resources/lightbulb/lightbulb.flyout.less
4 files changed, 37 insertions(+), 2 deletions(-)
Approvals:
Phuedx: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/lightbulb/images/ajax-loader-2x.gif
b/resources/lightbulb/images/ajax-loader-2x.gif
new file mode 100644
index 0000000..c519155
--- /dev/null
+++ b/resources/lightbulb/images/ajax-loader-2x.gif
Binary files differ
diff --git a/resources/lightbulb/images/ajax-loader.gif
b/resources/lightbulb/images/ajax-loader.gif
new file mode 100644
index 0000000..3288d10
--- /dev/null
+++ b/resources/lightbulb/images/ajax-loader.gif
Binary files differ
diff --git a/resources/lightbulb/lightbulb.flyout.js
b/resources/lightbulb/lightbulb.flyout.js
index 2d9d0e8..413e539 100644
--- a/resources/lightbulb/lightbulb.flyout.js
+++ b/resources/lightbulb/lightbulb.flyout.js
@@ -26,6 +26,9 @@
<span
class="mw-gettingstarted-lightbulb-flyout-error-state-button-text"></span>\
</a>\
</div>\
+ <div
class="mw-gettingstarted-lightbulb-flyout-loader">\
+ <div
class="mw-gettingstarted-lightbulb-flyout-loader-spinner"></div>\
+ </div>\
<div class="guider_arrow guider_arrow_up
guider_arrow_center">\
<div
class="guider_arrow_inner_container">\
<div
class="guider_arrow_inner"></div>\
@@ -336,6 +339,9 @@
function requestSuggestions() {
var api = new mw.gettingStarted.Api();
+ $flyout.addClass( 'mw-gettingstarted-lightbulb-flyout-loading'
);
+ showFlyout();
+
requestingSuggestions = true;
api.getLastArticleUserEdited( mw.user.getName() )
.done( function ( title ) {
@@ -354,15 +360,15 @@
addErrorStateToFlyout(
'no-recommendations' );
} )
.always( function () {
- showFlyout();
+ $flyout.removeClass(
'mw-gettingstarted-lightbulb-flyout-loading' );
requestingSuggestions = false;
} );
} )
.fail( function () {
// no article edits state
+ $flyout.removeClass(
'mw-gettingstarted-lightbulb-flyout-loading' );
addErrorStateToFlyout( 'no-article-edits' );
requestingSuggestions = false;
- showFlyout();
} );
}
diff --git a/resources/lightbulb/lightbulb.flyout.less
b/resources/lightbulb/lightbulb.flyout.less
index 99d55cb..700b5d6 100644
--- a/resources/lightbulb/lightbulb.flyout.less
+++ b/resources/lightbulb/lightbulb.flyout.less
@@ -133,6 +133,15 @@
}
}
+.mw-gettingstarted-lightbulb-flyout-loading {
+ .mw-gettingstarted-lightbulb-flyout-head,
+ .mw-gettingstarted-lightbulb-flyout-text,
+ .mw-gettingstarted-lightbulb-flyout-pagination,
+ .mw-gettingstarted-lightbulb-flyout-error-state {
+ display: none;
+ }
+}
+
.mw-gettingstarted-lightbulb-flyout-error-state {
text-align: center;
white-space: normal;
@@ -189,6 +198,26 @@
}
}
+.mw-gettingstarted-lightbulb-flyout-loading
.mw-gettingstarted-lightbulb-flyout-loader {
+ display: block;
+}
+
+.mw-gettingstarted-lightbulb-flyout-loader {
+ margin: auto;
+ padding: 45px 71px;
+ display: none;
+
+ .mw-gettingstarted-lightbulb-flyout-loader-spinner {
+ margin: auto;
+ width: 32px;
+ height: 32px;
+ background-position: center;
+ background-size: 32px;
+ // Graceful degradation for browsers that don't support
background-size
+ .background-image-svg('images/ajax-loader-2x.gif',
'images/ajax-loader.gif');
+ }
+}
+
// TODO (phuedx, 2014/07/30): Classes like this would simplify the
// GuidedTour library. Create the entire set of classes upstream.
--
To view, visit https://gerrit.wikimedia.org/r/159077
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Idf091a98e108e577cbc57563c8f8540964b2bfef
Gerrit-PatchSet: 7
Gerrit-Project: mediawiki/extensions/GettingStarted
Gerrit-Branch: master
Gerrit-Owner: Robmoen <[email protected]>
Gerrit-Reviewer: Mattflaschen <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: Swalling <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
