Wait until page elements are rendered before showing page content.

Review Request #13201 — Created Aug. 10, 2023 and submitted — Latest diff uploaded

Information

Review Board
release-6.x

Reviewers

We have UI elements that are dynamically set up as the page is loading.
Historically, we've let these pop in and out of existence during page
load, which doesn't look particularly great. This is very noticeable
with the review banner, and previously the draft banners, which both
show up and set up layout after the content below is shown.

We solved this problem once before for full-viewport pages, like the
dashboard, and are taking basically the same approach now. We now hide
the #page-container element until after we've finished render. The
page header bar will remain visible while the rest of the page loads.

This isn't very noticeable in production, with compiled, cached
JavaScript.

The approach for full-viewport pages used display: block, wheraes now
we use visibility: hidden. This ensures that content can lay out
elements with appropriate bounding boxes, so there aren't any changes in
render or layout.

Tested the dashboard and datagrid pages, review request page, diff
viewer, file attachment review UIs, and administration UI pages.

Checked each type of page for any regressions in appearance.

Verified that this prevents the initial page jump from banners and
suddenly-appearing edit icons for review request fields.

Commits

Files