Preview popup loader (#3157)

* Added test for Preview popup document.write

* Render a loader in the Preview popup

* Added minimal styling to popup preview

* Remove React.renderToString()

* Remove <style> type; call document.close()

* Use flexbox; change HTML/CSS string format

* Combine html & css variables

* Mock document.close() in test

* Styled preview popup text

editor/header/preview-button/index.js

@@ -73,6 +73,29 @@ export class PreviewButton extends Component {
 			'about:blank',
 			this.getWindowTarget()
 		);
+
+		const markup = `
+			<div>
+				<p>Please wait&hellip;</p>
+				<p>Generating preview.</p>
+			</div>
+			<style>
+				div {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					height: 100vh;
+					width: 100vw;
+				}
+				p {
+					text-align: center;
+					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+				}
+			</style>`;
+
+		this.previewWindow.document.write( markup );
+		this.previewWindow.document.close();
 	}
 
 	render() {

editor/header/preview-button/test/index.js

@@ -53,7 +53,14 @@ describe( 'PreviewButton', () => {
 			const autosave = jest.fn();
 			const preventDefault = jest.fn();
 			const windowOpen = window.open;
-			window.open = jest.fn();
+			window.open = jest.fn( () => {
+				return {
+					document: {
+						write: jest.fn(),
+						close: jest.fn(),
+					},
+				};
+			} );
 
 			const wrapper = shallow(
 				<PreviewButton { ...props } autosave={ autosave } />
@@ -66,6 +73,7 @@ describe( 'PreviewButton', () => {
 				expect( preventDefault ).toHaveBeenCalled();
 				expect( wrapper.state( 'isAwaitingSave' ) ).toBe( true );
 				expect( window.open ).toHaveBeenCalled();
+				expect( wrapper.instance().previewWindow.document.write ).toHaveBeenCalled();
 			} else {
 				expect( autosave ).not.toHaveBeenCalled();
 				expect( preventDefault ).not.toHaveBeenCalled();