From 68b454c43ad73da04d01173a4b64fe25c09d68fd Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Tue, 23 Oct 2018 11:19:58 +0200
Subject: [PATCH] Try WordPress logo animation for preview (#10896)

* Try WordPress logo animation for preview

This adds a WordPress logo that paints itself when you click preview.

Labelled "Try" because it still needs a few thoughts. We might need to speed up the animation because most previews are super fast and you barely see the animation.

* Clean up CSS, add vendor prefixes

* Tweak the changelog
---
 packages/editor/CHANGELOG.md                  |  6 ++-
 .../components/post-preview-button/index.js   | 42 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
index 3f7d1d3b466970..a57ac48e8f0f94 100644
--- a/packages/editor/CHANGELOG.md
+++ b/packages/editor/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## 5.0.1 (2018-10-22)
 
+### Polish
+
+- Add animated logo to preview interstitial screen.
+
 ## 5.0.0 (2018-10-19)
 
 ### Breaking Changes
@@ -52,7 +56,7 @@
 - `isFetchingSharedBlock` selector has been removed. Use `isFetchingReusableBlock` instead.
 - `getSharedBlocks` selector has been removed. Use `getReusableBlocks` instead.
 - `editorMediaUpload` has been removed. Use `mediaUpload` instead.
-- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)).  If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.
+- Change how required built-ins are polyfilled with Babel 7 ([#9171](https://github.com/WordPress/gutenberg/pull/9171)). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods.
 - `wp.editor.DocumentTitle` component has been removed.
 - `getDocumentTitle` selector (`core/editor`) has been removed.
 
diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js
index 1a2494dca98f9a..6d4f5941951145 100644
--- a/packages/editor/src/components/post-preview-button/index.js
+++ b/packages/editor/src/components/post-preview-button/index.js
@@ -90,8 +90,11 @@ export class PostPreviewButton extends Component {
 
 		const markup = `
 			<div class="editor-post-preview-button__interstitial-message">
-				<p>Please wait&hellip;</p>
-				<p>Generating preview.</p>
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+					<path class="outer" d="M48 12c19.9 0 36 16.1 36 36S67.9 84 48 84 12 67.9 12 48s16.1-36 36-36" fill="none" />
+					<path class="inner" d="M69.5 46.4c0-3.9-1.4-6.7-2.6-8.8-1.6-2.6-3.1-4.9-3.1-7.5 0-2.9 2.2-5.7 5.4-5.7h.4C63.9 19.2 56.4 16 48 16c-11.2 0-21 5.7-26.7 14.4h2.1c3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3L40 67.5l7-20.9L42 33c-1.7-.1-3.3-.3-3.3-.3-1.7-.1-1.5-2.7.2-2.6 0 0 5.3.4 8.4.4 3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3l11.5 34.3 3.3-10.4c1.6-4.5 2.4-7.8 2.4-10.5zM16.1 48c0 12.6 7.3 23.5 18 28.7L18.8 35c-1.7 4-2.7 8.4-2.7 13zm32.5 2.8L39 78.6c2.9.8 5.9 1.3 9 1.3 3.7 0 7.3-.6 10.6-1.8-.1-.1-.2-.3-.2-.4l-9.8-26.9zM76.2 36c0 3.2-.6 6.9-2.4 11.4L64 75.6c9.5-5.5 15.9-15.8 15.9-27.6 0-5.5-1.4-10.8-3.9-15.3.1 1 .2 2.1.2 3.3z" fill="none" />
+				</svg>
+				<p>Generating preview...</p>
 			</div>
 			<style>
 				body {
@@ -105,6 +108,41 @@ export class PostPreviewButton extends Component {
 					height: 100vh;
 					width: 100vw;
 				}
+				@-webkit-keyframes paint {
+					0% {
+						stroke-dashoffset: 0;
+					}
+				}
+				@-moz-keyframes paint {
+					0% {
+						stroke-dashoffset: 0;
+					}
+				}
+				@-o-keyframes paint {
+					0% {
+						stroke-dashoffset: 0;
+					}
+				}
+				@keyframes paint {
+					0% {
+						stroke-dashoffset: 0;
+					}
+				}
+				.editor-post-preview-button__interstitial-message svg {
+					width: 192px;
+					height: 192px;
+					stroke: #555d66;
+					stroke-width: 0.75;
+				}
+				.editor-post-preview-button__interstitial-message svg .outer,
+				.editor-post-preview-button__interstitial-message svg .inner {
+					stroke-dasharray: 280;
+					stroke-dashoffset: 280;
+					-webkit-animation: paint 1.5s ease infinite alternate;
+					-moz-animation: paint 1.5s ease infinite alternate;
+					-o-animation: paint 1.5s ease infinite alternate;
+					animation: paint 1.5s ease infinite alternate;
+				}
 				p {
 					text-align: center;
 					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;