Smoother email preview updates

[dblatcher]

What does this change?

Changes the component that loads and renders the preview of the Newsletter content to:

• update the HTML in the page without using an iframe's srcdoc, so changes to the headline etc do not cause the preview to flash as the whole iframe is repainted
• use inline messages to display when a preview hasn't loaded (eg because an audience needs to be selected) rather than rendering the message in place of the HTML content.

How has this change been tested?

Ran locally, added stories for the updated component.

How can we measure success?

Better user experience for email previews

Have we considered potential risks?

We don't have specific designs for this component, or its loading/error/placeholder state - should get this version looked over

In theory, it is more secure to renderer arbitrary HTML string in an iframe, but in practise, we are fetching content from our own rendering service, so can expect it to be safe.

Images

before	after

Accessibility

• Tested with screen reader
• Navigable with keyboard
• Colour contrast passed
• The change doesn't use only colour to convey meaning

[github-actions]

Deploy build 1090 of Editorial Tools::Dispatch to CODE

All deployment options

• Deploy build 1090 of Editorial Tools::Dispatch to CODE
• Deploy parts of build 1090 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.