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.

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

TheDJ created this task.Jul 18 2018, 7:48 PM
Restricted Application added a project: Growth-Team. · View Herald TranscriptJul 18 2018, 7:48 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
MMiller_WMF moved this task from Incoming to QA on the Growth-Team (Current Sprint) board.
MMiller_WMF added subscribers: Etonkovidova, MMiller_WMF.

Putting in @Etonkovidova's column to verify and learn more.

Etonkovidova closed this task as Resolved.Sep 6 2018, 6:49 PM
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.