Page MenuHomePhabricator

Search result page is still jumping when coming from default search field
Closed, ResolvedPublic5 Estimated Story Points

Description

Steps to reproduce:

On a slow connection, type "Katze" in the upper right search bar of the German Wikipedia and select the "enthält ..." option at the bottom of the autocomplete drop-down.

Expected Result:
I see the results, with a white placeholder where the Advanced Search will appear. When the Advanced Search has finished loading, the white placeholder is replaced with the Advanced Search.

Actual result:
The search results are displayed directly below the default plain search field. When the Advanced Search has finished loading, the search results are pushed down and I lose my context or misclick.

Note:
This happens because we're "abusing" the old namespace selection (element #mw-searchoptions) as a hidden placeholder & setting its height (see T189028: Reduce or remove content jumps because of JavaScript loading times). This element is not present for the "simple" search result that is displayed when coming from the search bar.

There at least two solutions: Continue with Moriels work of prerendering on the server or insert our own placeholder and "container" until the whole element is loaded (probably the placeholder needs to be rendered on the server to avoid jumping). The container element should be slightly bigger (min-height) than the advanced search because it has slightly different heights on different platforms, which currently also leads to some slight jumpiness when not using the simple search, despite the efforts in T189028: Reduce or remove content jumps because of JavaScript loading times.

If we'd go with Moriel's solution, it would have been estimated as 13+.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
kai.nissen set the point value for this task to 5.Jul 16 2018, 9:09 AM
kai.nissen updated the task description. (Show Details)

Change 451621 had a related patch set uploaded (by Tim Eulitz; owner: Tim Eulitz):
[mediawiki/core@master] Add wrapper to search form widget

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

Change 451630 had a related patch set uploaded (by Tim Eulitz; owner: Tim Eulitz):
[mediawiki/extensions/AdvancedSearch@master] Prevent result page from jumping

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

In order to implement this fix I had to touch the MediaWiki core and add an element around the search form, using a Hook was unfortunately not possible. This change can be found here:

https://gerrit.wikimedia.org/r/#/c/451621/

In addition to that, I implemented a minimum height for the new wrapper in AdvancedSearch:

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

The whitespace is not visible for users with JavaScript disabled. I also added a loading animation for users with slow connections as I figured the whitespace may be confusing to users which are on a slow connection, let me know if this is a problem since this was not discussed previously, I just saw this was done on the Recent Changes extension as well:

Tim_WMDE moved this task from Doing to Review on the WMDE-FUN-Sprint-2018-08-06 board.
Tim_WMDE added a subscriber: Tim_WMDE.

Change 451621 merged by jenkins-bot:
[mediawiki/core@master] Add wrapper to search form widget

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

@Tim_WMDE

looks fine to me. I don't think the white space is a problem, but rather frames the area quite nicely.

Change 451630 merged by jenkins-bot:
[mediawiki/extensions/AdvancedSearch@master] Prevent result page from jumping

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