Page MenuHomePhabricator

Improve AdvancedSearch load pending animation
Closed, ResolvedPublic2 Estimated Story Points

Description

In response to a discussion held in T203373, the three dots loading animation should be improved.

In the ticket mentioned above, the relatively high position of the dots was brought up. It should also be noted that the position of the dots being so close to the input field is actually a bug in combination with custom CSS on the German Wikipedia. I have changed the CSS in way that fixes the issue on Wikipedia without introducing any side effects on other MediaWiki instances or Wikipedia users (fingers crossed 🤞).

On top of that, I have added a fade in for the dots using a pure CSS animation approach, the dots will now only appear after 1.1 seconds which and fully fade in within 400ms. This way, only users who are truly experiencing (network) performance issues should be seeing the dots (and thus increase the perceived performance of AdvancedSearch) without loading more bloating JavaScript to handle this case. This approach can also be used for the solution needed in T205386.

Here is a quick showcase of what it would now look like for users with a slow connection:

Users with a fast connection and under expected performance circumstances will not see the dots at all.

Event Timeline

Tim_WMDE moved this task from Todo to Doing on the WMDE-FUN-Sprint-2018-09-17 board.

Change 462746 had a related patch set uploaded (by Tim Eulitz; owner: Tim Eulitz):
[mediawiki/extensions/AdvancedSearch@master] Improve loading animation user experience

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

Tim_WMDE set the point value for this task to 2.Sep 25 2018, 4:31 PM

Change 462746 merged by jenkins-bot:
[mediawiki/extensions/AdvancedSearch@master] Improve loading animation user experience

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

Lea_WMDE closed this task as Resolved.Oct 11 2018, 8:50 AM
Lea_WMDE triaged this task as Medium priority.