Page MenuHomePhabricator

Reduce flash of empty page and hoisted footer when loading Special:SuggestedTags (FOUC)
Closed, ResolvedPublic


When loading the page, it currently undergoes through these stages:

Screenshot 2020-01-13 at 20.09.29.png (1×2 px, 190 KB)
Screenshot 2020-01-13 at 20.09.38.png (1×2 px, 277 KB)
Screenshot 2020-01-13 at 20.09.44.png (1×2 px, 1 MB)

Based on previous effort from RCFilters/Watchlist, and VisualEditor; that first flash would be less jarring if the footer was generally below the fold.

This can be done by reserving an estimate of the needed space ahead of time with a placeholder element (rendered server-side) that has its dimensions set in CSS (guarded by .client-js so as to not render it below the fallback message).

The introduction paragraph can probably be rendered server-side as well using $this->msg(…)->escaped(), and might make sense to display regardless of support mode (e.g. render the no-js message below it).

Perceived performance

With the whitespace reserved ahead of time, there is still the issue that there is no indication to the user that something is happening. Perhaps making the placeholder grey (instead of white) could make that experience more pleasing, especially given that the actual UI also uses that color prominently.

It might also make sense to display a temporary text message in that space (e.g. "Loading an image for review"). One could utilise CSS3 transition-delay to make that message appear only if loading takes more than 0.9s (or something like that). This reduces the number of transitions for the fast case, while in the slow case ensuring that loading is acknowledged within a second.

Event Timeline

Krinkle created this task.

Change 575350 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/MachineVision@master] Improve page load experience and fix FOUC

Change 575350 merged by jenkins-bot:
[mediawiki/extensions/MachineVision@master] Improve page load experience and fix FOUC

On production: space is allocated for the images and footer is below the fold, and there's a "loading" icon/indicator, images fade in when loaded