Features should not cause layout flap as they load

Just trying this now, and the fact that enhancements take time to load, but they modify the document layout, causing layout flap, makes it quite painful to use.

A couple that immediately stood out:

• .__rhn__comment-indent uses border-right: 1px solid #ccc which increases its width by one pixel, making the comment shift a pixel to the right (and consequently occasionally reflow the text as well). Use box-shadow: inset -1px 0 #ccc instead so that the border doesn’t affect the layout.

• “toggle all comments” causes a big vertical jump; maybe float it right on the “add comment” button or the .subtext, or disable it by default, or statically reserve the space in CSS that will be in the first contentful paint, and then be replaced by the actual button/link once it can be added.

There may be others. I’ve tried it for less than four minutes so far.

[chris-morgan]

A simple rough fix for the header:

[op=news] #pagespace + :not(.__rhn__options-bar) > td {
    padding-top: 31px;
}

As it stands this CSS is typically not loaded until just after the first draw, so there’s still slight layout flap, but it’s much less.

[Ajedi32]

I think the main cause of this issue is that the features currently load in sequence rather than in parallel:

https://github.com/plibither8/refined-hacker-news/blob/a43ecc4525166fe8f95614a6733e2b2441e2300d/src/libs/initialise.js#L139-L142

This, combined with the fact that some features seem to require network operations to fully load, results in a significant delay between when the page loads, and when the features load.

Updating the initializer to load everything in parallel, and updating each feature to make its DOM updates as early as possible would resolve this issue.