Ideally we should create the UI on the server side (php OOUI). This is however not an easy task...

Meanwhile I believe Roan's plot to do spinner-reform ( https://gerrit.wikimedia.org/r/#/c/379148/2 ) is probably the best bet for now and will make it somewhat less noticeable.

We mostly try to prevent the reflow by setting a min-height on the container that will contain the UI, but:

1. That min-height value is just a little too low
2. On RC, there is a container for the "show new changes" link that is added after and isn't inside the container that gets the min-height
3. The highlight containers cause the change line bullets to be indented

Fixing #1 should be easy. #3 should be fixable with some CSS indenting the bullets (and possibly moving to absolute positioning for the highlight containers altogether). #2 will be a bit more annoying but we can probably output that container on the server side with a min-height.

watchlistdetails also isn't inside that min-height I think is it ?

In T176300#3622870, @TheDJ wrote:

watchlistdetails also isn't inside that min-height I think is it ?

Yes, on Watchlist that is an additional problem. And on RC, the "community tools" thing at the top (the place where communities put all their links for various things) starts out uncollapsed and becomes collapsed, that also causes a jump.

@Catrope is this a dupe of some of the other tickets, or is this a task we'll want to prioritize for fixing before next week's release?

And should I change the title to "Fix page reflow on Watchlist and Recent Changes"?

In T176300#3622926, @jmatazzoni wrote:

@Catrope is this a dupe of some of the other tickets, or is this a task we'll want to prioritize for fixing before next week's release?

And should I change the title to "Fix page reflow on Watchlist and Recent Changes"?

Yes, this is what we want to focus on. Fixing the community tools collapsing themselves should be a subtask of this.

In T176300#3622870, @TheDJ wrote:

watchlistdetails also isn't inside that min-height I think is it ?

So, it turns out, watchlistdetails is inside the min-height, and that's part of the problem.

watchlist-details is supposed to only be one line ("NNN pages are on your Watchlist (plus talk pages). Email notification is enabled. Changes to pages you haven't visited since the changes occurred are in bold, with solid markers."). On English Wikipedia, this has been hacked so that 1) it's two lines instead of one ("Changes to pages..." is on its own line; "Email notification is enabled" is not displayed at all, because it isn't available) and 2) it contains all the RFA/RFC links. #2 is a problem, because the community links are supposed to go into watchlist-summary instead, which is outside the min-height and outside the div that gets hidden while the new interface builds.

I'll propose moving these links on the talk page.

Change 379427 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/core@master] WLFilters: Don't hide .watchlistDetails while loading

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

In T176300#3623053, @Catrope wrote:

I'll propose moving these links on the talk page.

Never mind, it was easier to just not hide watchlist-details during initialization. It's not 100% correct to not do so, but it's much quicker than having a discussion about moving enwiki's tools to watchlist-summary. (I'll still propose that though.)

In T176300#3623112, @Catrope wrote:

(I'll still propose that though.)

Proposed here: https://en.wikipedia.org/wiki/MediaWiki_talk:Watchlist-details#Proposal:_Move_help_links_from_MediaWiki:Watchlist-details_to_MediaWiki:Watchlist-summary

Change 379447 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/core@master] RCFilters: Make the interface not jump around while loading

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

The above commit contains a bunch of fixes and tweaks that together eliminate reflow completely on my localhost (except for a very small horizontal reflow that is specific to the watchlist in enhanced mode), We'll have to see if it completely eliminates all reflows in production too, but I did test with large-ish community link sections, so hopefully it will, and if not it should come close.

Proposed here: https://en.wikipedia.org/wiki/MediaWiki_talk:Watchlist-details#Proposal:_Move_help_links_from_MediaWiki:Watchlist-details_to_MediaWiki:Watchlist-summary

I'll see if I have some time later today to wade through that....

Change 379427 merged by jenkins-bot:
[mediawiki/core@master] WLFilters: Don't hide .watchlistDetails while loading

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

Change 379447 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Make the interface not jump around while loading

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

Change 379588 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/core@wmf/1.30.0-wmf.19] WLFilters: Don't hide .watchlistDetails while loading

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

Change 379589 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/core@wmf/1.30.0-wmf.19] RCFilters: Make the interface not jump around while loading

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

Change 379588 merged by jenkins-bot:
[mediawiki/core@wmf/1.30.0-wmf.19] WLFilters: Don't hide .watchlistDetails while loading

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

Change 379589 merged by jenkins-bot:
[mediawiki/core@wmf/1.30.0-wmf.19] RCFilters: Make the interface not jump around while loading

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

Mentioned in SAL (#wikimedia-operations) [2017-09-21T18:44:19Z] <thcipriani@tin> Synchronized php-1.30.0-wmf.19/resources/src/mediawiki.rcfilters: SWAT: [[gerrit:379588|WLFilters: Do not hide .watchlistDetails while loading]] T176300 [[gerrit:379589|RCFilters: Make the interface not jump around while loading]] (duration: 00m 49s)

The screen recording for Watchlist in betalabs - looks like reflow is gone. Also, checked on enwiki (1.31.0-wmf.1).