Page MenuHomePhabricator

Explore more subtle way to indicate filter loading status
Closed, ResolvedPublic

Description

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.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 15 2017, 8:34 AM

Why don't we use the visual editor loading bar? It may be too much.

In order to make the waiting experience less jarring, I'd recommend to:

  • Affect only the results area, not blocking the filter controls.
  • Apply a 50% transparent white overlay over the results (or make the results to use 50% opacity), without using flashing bars.
  • Add a more subtle activity indicator based on three pulsing dots as proposed in T75972

The loading view would look like this:

The indicator is animated, moving enough to communicate there is activity but gradually enough to avoid distractions:

Why don't we use the visual editor loading bar? It may be too much.

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.

I like the three-dots option!

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

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

Change 366770 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Change loading animation

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

@Mooeypoo

  • The three-dot animation appears only on the reload or when a browser back button is used, not when a filter is removed/added or saved filters are loaded.
  • When three-dot animation is in progress
    • the background does not display the currently selected filters - the old filters are displayed
    • 50% transparent white overlay is applied to the filer area not to the result area

Change 367731 had a related patch set uploaded (by Mooeypoo; owner: Mooeypoo):
[mediawiki/core@master] RCFilters: Improve loading animation

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

Change 367731 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Improve loading animation

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

This comment was removed by Catrope.

Change 367833 had a related patch set uploaded (by Catrope; owner: Mooeypoo):
[mediawiki/core@wmf/1.30.0-wmf.11] RCFilters: Improve loading animation

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

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

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

Change 367849 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Followup I78e23f85c3: Don't disable RCFilters system when fetching results

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

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

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

Change 367833 merged by jenkins-bot:
[mediawiki/core@wmf/1.30.0-wmf.11] RCFilters: Improve loading animation

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

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

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

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

jmatazzoni closed this task as Resolved.Jul 28 2017, 8:40 PM

It looks OK to me. Closing this.

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?

Volker_E added a subscriber: Volker_E.EditedJul 31 2017, 5:32 PM

@Pginer-WMF We should increase contrast of the three dots. (sorry for being late to the party), at least Base30 or Base20.

Volker_E reopened this task as Open.Jul 31 2017, 5:39 PM

And we should consider support for older browsers with animation and @keyframes.

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.

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

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

jmatazzoni closed this task as Resolved.Aug 1 2017, 1:26 AM

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

@Pginer-WMF We should increase contrast of the three dots. (sorry for being late to the party), at least Base30 or Base20.

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

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