Page MenuHomePhabricator

Make loading bar of revisionslider less mesmerizing
Closed, ResolvedPublic

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:

Future:

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 :-)

Event Timeline

…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 ?)

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

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.

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

@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.

@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.

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?

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).

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

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

Yay! First ticket of the season deployed :)