enhancement(load): Branded first renders

[zetlen]

Description

Refactor Mustache templates to share a small critical CSS block and use it to render a branded first paint.

Add a general concept of resource.name to UPWARD, enabling the loading indicator to be a shared partial which uses resource.name and can therefore be customized per page.

Refactor noscript and 404 pages to use the same basic system.

Related Issue

Closes #1272

Verification Steps

1. Go to a nonexistent page with an HTML extension, like /nothing.html. Verify Not Found page.
   
   

2. Edit packages/venia-concept/templates/seed-bundles.mst and type garbage in the src attribute so the app doesn't load.

{{#assets.bundles.load}}
    <script defer src="bsdasbd{{.}}"></script>
{{/assets.bundles.load}}

3. Go to homepage. Verify branded first render.

4. Go to category page: /venia-tops.html. Verify branded first render.
   

5. Go to product page: /carmina-earrings.html. Verify branded first render.
   

6. Open Chrome Developer tools, open the Command Palette (Cmd-Shift-P on OSX) and type "Disable JavaScript". Press Enter.

7. Refresh page. Verify branded no-script experience.
   
   

How Have YOU Tested this?

Portrait and landscape orientation on many, many browsers and devices.

Proposed Labels for Change Type/Package

• major (e.g x.0.0 - a breaking change)
• minor (e.g 0.x.0 - a backwards compatible addition)
• patch (e.g 0.0.x - a bug fix)

Checklist:

• I have updated the documentation accordingly, if necessary.
• I have added tests to cover my changes, if necessary.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://venia-git-zetlen-branded-first-render.magento-research1.now.sh

[coveralls]

Coverage remained the same at 78.661% when pulling 5802479 on zetlen/branded-first-render into 7655bf3 on non-blocking-css-font.

[soumya-ashok]

@zetlen This is the mockup I have for a general "Page not found" use-case. Please let me know if any modifications need to be made for this specific instance.

[soumya-ashok]

@zetlen On the loading indicator and text, there is a size and treatment for both that we are following on other pages, so would be good to keep that consistent here as well.

[PWAStudioBot]

	Messages
📖	We are currently working on automating the PR metadata checks. Until that time, you may see failures related to labels/description/linked issues/etc even if you have fixed the problem. Failures will persist until the next push (assuming they are fixed).

Generated by 🚫 dangerJS against ffff99d

[zetlen]

By page name I mean - "Home" "Product details" "Search results" etc. - will this work?

Text color #212121

@soumya-ashok The page name can include the name of the actual entity: whether it's the product ("Carmina Earrings") or the category "Accessories" or a search result for the query "green". Do you want to not include that dynamic data and just say "Product details", "Category" above the loading spinner?

[soumya-ashok]

Yes, my preference would be to keep it generic for this first iteration, since we are working on a more detailed strategy for the future.

[zetlen]

@soumya-ashok OK, update pushed! In both the first-paint and intra-page loading indicators, you should now have a fully vertically centered UI.

[sirugh]

@dpatil-magento merge conflict and any missing stuff has been added!

[jimbo]

@zetlen Looks good to me now; thanks for making changes. 👍