Page MenuHomePhabricator
Create Task
Maniphest T161640

Make loading bar of revisionslider less mesmerizing
Closed, ResolvedPublic
Actions

Description

Motivation
Currently, the loading bar of the revision slider is in bright colors and moves quickly. This leads to some people staring at it while loading, even if they don't intend to use it (but have it pinned to be open always)

Task
Goal: Remove the attention-drawing suction of the revision slider loading bar and replace it with this three-moving-bubbles animation (Reuse its CSS-Code for details of colors and animation)

Currently:

image.png (234×598 px, 7 KB)

Future:

image.png (234×598 px, 8 KB)

The animation should be centered horizontally and vertically.

Info for the Hackathon 2018
If you are interested in working on this at the Wikimedia-Hackathon-2018 , @WMDE-Fisch can help you with any questions :-)

Details

SubjectRepoBranchLines +/-
Replace loading bar of revision slider with three moving bubblesmediawiki/extensions/RevisionSlidermaster+80 -3
Customize query in gerrit

Related Objects
Search...

Event Timeline

• Lea_WMDE created this task.Mar 28 2017, 6:49 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 28 2017, 6:49 PM
• Lea_WMDE moved this task from Incoming to Maintenance on the Revision-Slider board.Apr 7 2017, 5:05 PM
• Lea_WMDE moved this task from Incoming to Revision Slider on the TCB-Team (now WMDE-TechWish) board.Apr 7 2017, 5:22 PM
WMDE-Fisch moved this task from Todo to Proposed on the WMDE-TechWish board.Apr 11 2017, 2:51 PM
• Jan_Dittrich subscribed.EditedMay 2 2017, 3:24 PM

…We could also try to use a waiting spinner instead of the big movements of the bounce-back-and-forth bar. But I am unsure of there is such an standardized element.
(What do you think, @Lea_WMDE ?)

• Lea_WMDE added a comment.May 3 2017, 2:45 PM

yes, if the spinner is a standardized OOUI element, we could use that, too (if the result is that it is less attention drawing)

• Jan_Dittrich added a comment.May 4 2017, 7:05 AM

great. I strongly think that it is less attention drawing, simply because it does not move large amounts of pixels over a rather wide area.

TheDJ subscribed.May 16 2017, 11:46 AM

This question seems to crossover with T163879: Distill UI styling for late loaded JS enhancements into OOUI or a MediaWiki core module

• Lea_WMDE edited projects, added patch-welcome; removed WMDE-TechWish.Jun 7 2017, 2:48 PM
• Lea_WMDE updated the task description. (Show Details)
• Lea_WMDE moved this task from Maintenance to volunteer tasks on the Revision-Slider board.Jul 4 2017, 1:40 PM
• Lea_WMDE updated the task description. (Show Details)Aug 1 2017, 1:23 PM
WMDE-Fisch added a project: good first task.Aug 9 2017, 2:54 PM
Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptAug 9 2017, 2:54 PM
• MichaelSchoenitzer_WMDE subscribed.EditedAug 21 2017, 1:13 PM

If anyone want's to hack on this but needs help finding where to start, whom to speak with or similar – starting this week there is now a weekly Technical Advice IRC meeting open for all volunteer developers: https://www.mediawiki.org/wiki/Technical_Advice_IRC_Meeting

• Lea_WMDE triaged this task as Medium priority.Mar 16 2018, 12:01 PM
• Lea_WMDE added a project: WMDE volunteer workboard.
• Lea_WMDE moved this task from Backlog to RevisionSlider - Tickets ready for pickup on the WMDE volunteer workboard board.Mar 16 2018, 12:06 PM
Bmueller added a project: Wikimedia-Hackathon-2018.May 16 2018, 12:23 PM
Bmueller updated the task description. (Show Details)
Bmueller added a subscriber: WMDE-Fisch.
Bmueller moved this task from Backlog to Project on the Wikimedia-Hackathon-2018 board.May 16 2018, 12:31 PM
• Lea_WMDE moved this task from volunteer tasks to Season of RevisionSlider on the Revision-Slider board.Jun 28 2018, 3:34 PM
• Jan_Dittrich added a subscriber: Volker_E.Jul 10 2018, 6:48 AM

@Volker_E Did the "moving dots" from T165286 get added to OOUI or component-ized otherwise?
I want to avoid to create another animation most likely not exactly able matching T165286.

Volker_E added a comment.Jul 11 2018, 10:28 PM

@Jan_Dittrich The moving dots are currently our default loading element for in-page view loading content, but it's not part of OOUI as widget. Please see also T75972 for general loading indicator discussion.

• Jan_Dittrich added a comment.Jul 12 2018, 9:20 AM

Thanks! What I could use for the specs/design example is the linked coodepen which Pau created 4 years ago and on which I build a slight color change as suggested by you in the ticket comment.

Would that be OK to use, or is there a more up-to-date, standard-ized-ish example somewhere else?

Volker_E added a parent task: T75972: Loading indicators / Progress indicators are inconsistent. .Jul 12 2018, 12:16 PM
Volker_E added a comment.Jul 12 2018, 3:22 PM

I've taken this as motivation to update T75972 and amend the code/design template. Note that we were also providing product owners/designers a choice between different loading indicator base sizes (16px vs 12px).

• Jan_Dittrich updated the task description. (Show Details)Jul 12 2018, 3:34 PM
• Lea_WMDE awarded a token.Jul 13 2018, 8:55 AM
• Lea_WMDE added a parent task: T199877: Small RevisionSlider tickets.Jul 18 2018, 8:09 AM
• Lea_WMDE edited projects, added Season of RevisionSlider; removed Wikimedia-Hackathon-2018.Aug 2 2018, 8:38 AM
SrishtiSethi claimed this task.Aug 2 2018, 3:47 PM
Gopavasanth subscribed.Aug 6 2018, 11:20 AM
gerritbot subscribed.Aug 9 2018, 3:54 AM

Change 451565 had a related patch set uploaded (by SrishtiSethi; owner: srish):
[mediawiki/extensions/RevisionSlider@master] Replace loading bar of revision slider with three moving bubbles

https://gerrit.wikimedia.org/r/451565

gerritbot added a project: Patch-For-Review.Aug 9 2018, 3:54 AM
SrishtiSethi mentioned this in rERSL78a6d6e608f2: Replace loading bar of revision slider with three moving bubbles.Aug 9 2018, 3:57 AM
WMDE-Fisch moved this task from Sprint Backlog to Review on the Season of RevisionSlider board.Aug 9 2018, 2:44 PM
SrishtiSethi mentioned this in rERSLec2ca9ee77ea: Address comments received on the patch.Aug 10 2018, 12:38 AM
SrishtiSethi mentioned this in rERSL6eae6c3e240c: Replace loading bar of revision slider with three moving bubbles.Aug 10 2018, 5:14 PM
WMDE-Fisch mentioned this in rERSLdd4310aecea6: Replace loading bar of revision slider with three moving bubbles.Aug 14 2018, 9:34 AM
WMDE-Fisch moved this task from Review to Demo on the Season of RevisionSlider board.Aug 14 2018, 11:28 AM
gerritbot added a comment.Aug 14 2018, 11:49 AM

Change 451565 merged by jenkins-bot:
[mediawiki/extensions/RevisionSlider@master] Replace loading bar of revision slider with three moving bubbles

https://gerrit.wikimedia.org/r/451565

Gopavasanth closed this task as Resolved.Aug 14 2018, 11:51 AM
Gopavasanth removed a project: Patch-For-Review.
Gopavasanth moved this task from Season of RevisionSlider to Done on the Revision-Slider board.
ReleaseTaggerBot added a project: MW-1.32-notes (WMF-deploy-2018-08-14 (1.32.0-wmf.17)).Aug 14 2018, 12:00 PM
Jdforrester-WMF edited projects, added MW-1.32-notes (WMF-deploy-2018-08-21 (1.32.0-wmf.18)); removed MW-1.32-notes (WMF-deploy-2018-08-14 (1.32.0-wmf.17)).Aug 14 2018, 8:55 PM
• Lea_WMDE moved this task from Demo to Done on the Season of RevisionSlider board.Sep 5 2018, 3:56 PM

Yay! First ticket of the season deployed :)

thiemowmde removed projects: WMDE volunteer workboard, TCB-Team (now WMDE-TechWish).Jan 7 2022, 2:27 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits