chore(style): remove jank from payment server load

[johngruen]

This patch fixes a loading jank on the payment server with the following fixes:

1. Brings minimal critical-path styles into a <style> to prevent the loading spinner from rendering incorrectly at the top of the document.
2. Updates Index page html to better match that of the content server.

[lmorchard]

I'm seeing a perpetual loading spinner with this and redundant DOM elements. I think we're also trying to get away from inline styles for CSP, but I don't think we're there yet.

[lmorchard]

id="root" is where the React app renders, once it's loaded. The contents here are just kind of pre-loading stuff until React comes in and replaces it all.

Moving the loading spinner above this in the DOM means the app is never visible. There's also a bunch of repeated elements here (static-footer, stage, etc) because React renders them in root.

[johngruen]

Thanks Les...yeah, i'm going to revisit this without moving around stuff in the index so much...I'm not adding inline styles at all here. is internal CSS also verboten b/c of CSP?

[lmorchard]

is internal CSS also verboten b/c of CSP?

Yeah, I think it's supposed to be, but we are kind of punting on it because Stripe components play with both if I recall

[johngruen]

it looks like you can set a nonce in CSP rules and in a <style> tag that would make it acceptable...i have no idea how hard that would be...documentation is a little way down in this section of the CSP MDN page

[shane-tomlinson]

Thanks Les...yeah, i'm going to revisit this without moving around stuff in the index so much...I'm not adding inline styles at all here. is internal CSS also verboten b/c of CSP

On the payments server unsafe-inline is used because the Stripe component uses inline style attributes and we can't control what they do. If that's the case, you should be fine to use a normal style tag here. Hopefully that makes using a nonce/sha moot:

it looks like you can set a nonce in CSP rules and in a <style> tag that would make it acceptable...i have no idea how hard that would be...documentation is a little way down in this section of the CSP MDN page

[johngruen]

@lmorchard i kind of want to revisit this in 148... it looks like @shane-tomlinson says that using a style tag is fine.

[johngruen]

actually I think i can do this by just getting rid of the pre-payload spinner

[johngruen]

This is kinda controversial i guess, but I don't think this image sticks around long enough for the alt text to have semantic importance (it could easily be a CSS background), and sometimes the word "Loading" flashes briefly on the screen on refresh

[LZoog]

For this to be technically valid HTML, we should at least set it to an empty string (alt='').

[johngruen]

Kk, I can fix that

[lmorchard]

Looks fine to me, though others can chime in