Single Pattern View: Layout content shifts and downloads asset twice.

[StevenDufresne]

Describe the bug

We render the post content in single-wporg-pattern.php and then replace it with JavaScript-driven content.

This leads to 2 problems:

1. The view flashes (jank)
2. The images (& other assets) are downloaded twice

This problem isn't as noticeable when patterns use small, compressed images, but some don't. Patterns from the wordpress.org author have large images, many greater than 1 MB (which is another issue we should address).

Related #255, #349

Ideas

1. The view flashes (jank)

a. Move the page header from js into PHP template. ← Probably the easiest
b. Add in some placeholders (fixed heights) in the Pattern Directory theme.

2. The images (& other assets) are downloaded twice

This is definitely tricky since we use the iframe. I wonder if we should consider taking pattern image snapshots on update/upload and use that for the main pattern grid and this page until the user interacts. We could then swap out the image for the iframe.
🤔

Screenshots

View Gif

Snapped at ~100mb up/down.

To Reproduce
Steps to reproduce the behavior:

1. Open up Inspector tools, click network tab
2. Go to https://wordpress.org/patterns/pattern/image-and-calendar/
3. Notice the page jump
4. Notice the image has been downloaded twice

Desktop (please complete the following information):

• OS: macOs Monterey
• Chrome: 98

[ryelle]

Fixed by not using a JS app anymore 🎉