| Pginer-WMF | |
| May 15 2017, 8:34 AM |
| F8913761: Capture d’écran_2017-07-31_12-55-46.png | |
| Jul 31 2017, 11:02 AM |
| F8913762: Capture d’écran_2017-07-31_12-56-51.png | |
| Jul 31 2017, 11:02 AM |
| F8859221: Screen Shot 2017-07-26 at 2.43.28 PM.png | |
| Jul 26 2017, 9:46 PM |
| F8859151: Screen Shot 2017-07-26 at 11.48.11 AM.png | |
| Jul 26 2017, 9:46 PM |
| F8808547: Screen Shot 2017-07-21 at 3.17.40 PM.png | |
| Jul 21 2017, 11:05 PM |
| F20240: cx_wait-indicators.png | |
| Jul 6 2017, 10:48 AM |
| F8629890: RC-next-loading.png | |
| Jul 6 2017, 10:48 AM |
| F8081584: Capture d’écran_2017-05-15_11-26-32.png | |
| May 15 2017, 9:27 AM |
When users operate the filters in the Recent Changes page, the whole results area shows a moving set of diagonal lines to indicate that results are loading. As captured in this comment, the current approach to communicate the loading of filters may be too distracting.
We may want to explore alternatives to communicate that the filters are loading without causing that much distraction.
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T75972 Loading indicators / Progress indicators are inconsistent. | |||
| Open | None | T168760 Clarify appropriate use of 'pending' background texture | |||
| Resolved | SBisson | T162675 'Integrated filters'—add all RC Page filters into the new UI along with selected new functions | |||
| Resolved | Mooeypoo | T165286 Explore more subtle way to indicate filter loading status |
In order to make the waiting experience less jarring, I'd recommend to:
The loading view would look like this:
The indicator is animated, moving enough to communicate there is activity but gradually enough to avoid distractions:
I think in this case we need an indeterminate loading indicator, since we may not be able to tell in advance how much it is going to take the wait.
According to T168760#3452245, the three dots option is not canonical but possible. I strongly advice to implement the three-dots loading indicator in place of the zebras.
Change 366770 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/core@master] RCFilters: Change loading animation
Change 366770 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Change loading animation
Change 367731 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/core@master] RCFilters: Improve loading animation
Change 367731 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Improve loading animation
Change 367833 had a related patch set uploaded (by Catrope; owner: Mooeypoo):
[mediawiki/core@wmf/1.30.0-wmf.11] RCFilters: Improve loading animation
Change 367849 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/core@master] RCFilters: Followup I78e23f85c3: Don't disable RCFilters system on load
Change 367849 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Followup I78e23f85c3: Don't disable RCFilters system when fetching results
Change 367850 had a related patch set uploaded (by Catrope; owner: Mooeypoo):
[mediawiki/core@wmf/1.30.0-wmf.11] RCFilters: Followup I78e23f85c3: Don't disable RCFilters system when fetching results
Change 367833 merged by jenkins-bot:
[mediawiki/core@wmf/1.30.0-wmf.11] RCFilters: Improve loading animation
Change 367850 merged by jenkins-bot:
[mediawiki/core@wmf/1.30.0-wmf.11] RCFilters: Followup I78e23f85c3: Don't disable RCFilters system when fetching results
Re-checked in betalabs and wmf.11
Re-loading the RC page - the white overlay totally covers the filter area; the three-dot animation is displayed
Changing filters - the white overlay dims the result area; the three-dot animation is displayed
QA Recommendation: Product should weigh in
I've tried this change. When the filters are loading the first time, there is this big blank space ad the 3 dots are not that visible:
Is it possible to have the three dots a little bit higher in the page, or the reduce the placeholder for the filters bar until it is loaded?
@Pginer-WMF We should increase contrast of the three dots. (sorry for being late to the party), at least Base30 or Base20.
I've tried this change. When the filters are loading the first time, there is this big blank space ad the 3 dots are not that visible:
Is it possible to have the three dots a little bit higher in the page, or the reduce the placeholder for the filters bar until it is loaded?
If we do that, the list jumps when it finally loads -- which we got complaints about.
That means we can't reduce the amount of vertical space, yes, but we could move the dots up though, right?
Change 368826 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] RCFilters: Add vendor prefixes to loading animation
@Volker_E, this task looks complete to me. The features requested are in place and basically work, and it seems like people are asking for enhancements.
Unless you think this is broken in some way, I'd like to close it and invite you to create a new task defining the improvements you'd like. Please file that to the integrated filters project (or just make it a subtask of this). OK? As I say, feel free to reopen if there is a bug in what we've done.
I'm not 100% sure that the contrast requirements for reading text (recognise all the strokes of a character in order to read it) apply to three moving blobs to indicate activity.
I used Base70 in the example (T165286#3411017), and we can try to use Base50 to make it a bit darker but making it more noticeable can become distracting.
Since this is a generic component, it is totally fine to keep tweaking it to improve it in the different places it is used, but that can happen in a different task (out of Recent Changes area).
@jmatazzoni As long as there's a patch on the specific task, (in this case it's supporting the CSS loading animation in older browsers, as we do everywhere else; and the patch isn't abandoned in the sense of not further developed) it's my practice to keep the tasks open.
@Pginer-WMF The component is indicating a rather important action (view gets updated), therefore it makes sense to increase contrast to let a bigger group of people deciphering the symbol…
I agree that increasing contrast is more of a question towards generalization of this component, which is not a blocker for keeping this task open.
Change 368826 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Add vendor prefixes to loading animation
