Page MenuHomePhabricator

Reduce or remove content jumps because of JavaScript loading times
Closed, ResolvedPublic2 Estimated Story Points

Description

The search field as well as all search results heavily jump around while the page is loading. In my (@thiemowmde) personal experience this constantly leads to misclicks. The most common use case is this: All I want is to click the first search result as fast as possible, the moment it appears on the screen. But what I hit instead are some fields in the advanced search form, because they pop up in the exact position where the first search result was just shown. The side-by-side comparison illustrates this:

Screenshot from 2018-05-08 16:54:39_.png (695×821 px, 65 KB)

Compare to the new recent changes as well as watchlist filters. Such jumps don't happen there. Instead a large empty area is reserved where the form does appear a moment later. The content below does not change position.

Patch-For-Review:

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Depends on FLESH OUT but: Did they™ already try the standard solution of setting a (no-)JS class on the html so that the page can be "prepared" for how it will look after JS is loaded.

Depends on FLESH OUT but: Did they™ already try the standard solution of setting a (no-)JS class on the html so that the page can be "prepared" for how it will look after JS is loaded.

Change 421568 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/AdvancedSearch@master] Reduce visual jumps while the JavaScript is loaded

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

thiemowmde renamed this task from Content jumps because of javascript loading times to Reduce or remove content jumps because of JavaScript loading times.May 8 2018, 3:05 PM
thiemowmde claimed this task.
thiemowmde triaged this task as Medium priority.
thiemowmde updated the task description. (Show Details)
thiemowmde set the point value for this task to 2.
thiemowmde moved this task from Incoming to Advanced Search on the TCB-Team (now WMDE-TechWish) board.

@WMDE-Fisch Do you remember the solution we found during the vienna hackathon we found for preventing jumping java script? Was it one of the mentioned ones already?

@WMDE-Fisch Do you remember the solution we found during the vienna hackathon we found for preventing jumping java script? Was it one of the mentioned ones already?

So the solution in the patch is the way to go. Set some CSS to reserve the space for the interface and remove it / override it the moment the interface comes up. To avoid having that space when JS will not be loaded we should probably make it depend on the .client-js class as seen in https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS

we should probably make it depend on the .client-js class […]

That is the case. :-)

Note that this is one more case where I think we could benefit from T163879: Distill UI styling for late loaded JS enhancements into OOUI or a MediaWiki core module to create a consistent and recognizable look for such elements.

Change 421568 merged by jenkins-bot:
[mediawiki/extensions/AdvancedSearch@master] Reduce visual jumps while the JavaScript is loaded

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

Change 433831 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/AdvancedSearch@master] Fix FOUC by explicitely specifying dependency order on .less files

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

Change 433831 merged by jenkins-bot:
[mediawiki/extensions/AdvancedSearch@master] Fix FOUC by explicitely specifying dependency order on .less files

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

Change 434002 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/AdvancedSearch@master] [WIP] Split ResourceLoader modules and delay loading many

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

Change 443042 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/AdvancedSearch@master] Update loading placeholder height as of OOUI 0.27.3

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

Change 443042 merged by jenkins-bot:
[mediawiki/extensions/AdvancedSearch@master] Update loading placeholder height as of OOUI 0.27.3

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

Change 434002 abandoned by Thiemo Kreuz (WMDE):
[WIP] Split ResourceLoader modules and delay loading many

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