Page MenuHomePhabricator

Flash of unstyled content and reflows in new watchlist filter
Closed, ResolvedPublic

Description

I've been noticing that at times the new watchlist filters create some flashes and jumping. I've been playing with the debugger, setting some breakpoints and when breaking on rcfilters.init(); and down inside mw.rcfilters.ui.MenuSelectWidget.prototype.onModelInitialize(), I found the following layout.

Screen Shot 2018-07-18 at 21.35.45.png (816×2 px, 169 KB)

I note two important things here:
1: the 'old' style form 'mw-watchlist-form' is visible. This should never be possible at this stage, it isn't even visible
2: the 'new' style is only partly assembled. Note how buttons like 'edit watchlist', 'mark all changes as seen' and the 'Results to show' dropdown are not yet added to the document. This means the new areas is made 'visible' and replaces the placeholder before it is fully constructed and dimensioned.

Both of these seem like significant performance problems, caused by incorrect building up of the ui, or possibly CSS files that have not finished loading before the UI was made visible.

I think improvements are required here. Possibly moving "removeClass('mw-rcfilters-ui-loading');" from the init to the end of the sequence would already be enough to improve this problem

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Etonkovidova claimed this task.

The issue does not seem to be reproducible anymore. I've added this task to the general task T176652: Performance review of RCFilters feature for tracking purposes.