Bug: Page content jumps during initial load due to late-loading layout styles

[basest-selves]

Describe the bug

On some pages in base/web, the main content visibly shifts during the initial page load. This layout jump happens before the page fully stabilizes and can be distracting for users.

Steps

1. Open the Base website in a desktop browser.
2. Perform a hard refresh or load the page with a slow network.
3. Observe the page content during the first second of load.
4. Notice the visible layout shift before the page settles.

Expected behavior

Page layout should remain stable during initial load, with minimal or no visible content shifting. Critical layout styles should be applied before content is rendered to avoid jumps.

Additional info

Proposed Solution

Critical layout styles should be loaded earlier in the page lifecycle to ensure the initial render matches the final layout. Any measurements or layout-dependent calculations should avoid triggering reflows after content is visible.

Environment

• Device: Desktop
• OS: macOS 14.x
• Browser: Chrome
• Browser Version: 120+
• Network: Slow 3G / throttled connection
• Reproducibility: Often (more visible on cold loads)