Page MenuHomePhabricator

Flash of unstyled content (FOUC) in watchlist and log in
Closed, ResolvedPublic

Description

Author: jgonera

Description:
I'm seeing FOUC in watchlist and log in form.

It seems that some of the CSS is loaded after the page is loaded. I suspect it might be caused by the number of CSS/JS files we load.

We should concatenate some of them to avoid so many requests. If ResourceLoader doesn't support it, then we should do it ourselves or submit a patch.


Version: unspecified
Severity: normal

Details

Reference
bz43739

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 1:28 AM
bzimport set Reference to bz43739.

I'm also seeing this on the Special:MobileOptions page

IIRC the fix is to have it loaded in head by the resource loader, rather than it being potentially loaded later causing the page to update itself.

In normal RL land, you just need to add 'position' => 'top' to the $wgResourceModules entry...

The mobile.watchlist module does define itself as having position top but for some reason this is not kicking in. Yet MFE's implementation of RL is still not complete.

Also it should probably be broken into two modules since javascript should be loaded at the bottom.

jgonera wrote:

Please note that the problem is not watchlist-specific. It happens at least in the login page too.

In my opinion the way that CSS is loaded by the ResourceLoader is wrong. The way it works is: first core JavaScript code (including RL) is loaded and then this JS code dynamically adds <link> (CSS) and <script> (JS) tags. This will always cause some additional delay in loading CSS, not to mention the number of requests it generates!