Site Editor: Fix classic theme site preview flickering

[karthikeya-io]

What?

Closes #69474

Fix classic theme site preview flickering

Why?

To prevent flickering and layout shift while the page is loading

How?

Hide the site-preview until other styles are applied .

Testing Instructions

1. Activate a classic theme
2. Go to Appearance > Design
3. Check the initial load of the preview, you can also check by reloading the browser.
4. Confirm there is no appearance and disappearance of the admin bar

(Test it with Fast 4g or lower speeds in the network tab of the inspector as this issue is more prominent at lower speeds)

Testing Instructions for Keyboard

Screenshots or screencast

Before

flickering-before.mov

After

flickering-after.mov

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @karthikeya-io! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: karthikeya-io <karthikeya01@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[stokesman]

This makes sense and I like that it avoids a flash of white background before the page loads. Thanks for putting it together. 🙇

I’m hoping we can go with a solution that doesn’t use the load event because it doesn’t fire until all media on the page has loaded. Even in a media-free case, it’s later than necessary for what’s being changed in the DOM. It’s potentially much later in cases with media—although probably not too commonly or gravely.

I’ve taken a look at avoiding the load event and it wasn’t looking too simple (with JS only). My current favorite idea is to have this handled from the backend #69474 (comment).

[Mamaduka]

Agreed. Handling the admin bar rendering on the server side seems to be the right direction.

Closing this in favor of the recent updates: #69474 (comment).