From 429fee8a034480f687711b2299c59e603228d1c0 Mon Sep 17 00:00:00 2001
From: Michael Thomas <michaelhthomas@outlook.com>
Date: Thu, 27 Jan 2022 19:31:42 -0500
Subject: [PATCH] Add loading indicator

---
 src/components/preview-form.tsx | 28 +++++++++++++++++++++--
 src/styles/editor.scss          | 40 ++++++++++++++++++++++++++++-----
 2 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/src/components/preview-form.tsx b/src/components/preview-form.tsx
index 7df0cd9..c72031b 100644
--- a/src/components/preview-form.tsx
+++ b/src/components/preview-form.tsx
@@ -4,7 +4,10 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 
+import { Spinner } from '@wordpress/components';
+
 import { baseUrl } from '@/globals';
+import { ReactComponent as CogIcon } from '@/assets/cogicon.svg';
 
 type PreviewProps = {
 	formId: string;
@@ -13,6 +16,7 @@ type PreviewProps = {
 
 type PreviewState = {
 	uniqueId: string;
+	loading: boolean;
 };
 
 class PreviewForm extends React.Component<PreviewProps, PreviewState> {
@@ -23,11 +27,12 @@ class PreviewForm extends React.Component<PreviewProps, PreviewState> {
 		// and removed from the page once it is no longer needed.
 		this.state = {
 			uniqueId: _.uniqueId(),
+			loading: true,
 		};
 	}
 
 	componentDidMount() {
-		this.loadEmbedScript();
+		this.loadEmbedScript( this.formReady.bind( this ) );
 	}
 
 	componentWillUnmount() {
@@ -61,13 +66,32 @@ class PreviewForm extends React.Component<PreviewProps, PreviewState> {
 		}
 	}
 
+	// Check if form is loaded
+	formReady() {
+		this.setState( { loading: false } );
+	}
+
 	render() {
 		return (
-			<div>
+			<div className="form-preview">
 				<div className="focus-grabber"></div>
+				{ this.state.loading &&
+					<div className="loader">
+						<div className="icon">
+							<CogIcon />
+						</div>
+
+						<p>
+							Loading...
+						</p>
+
+						<Spinner />
+					</div>
+				}
 				<div
 					className="cog-wp-embed cog-wp-embed__preview"
 					dangerouslySetInnerHTML={ { __html: this.props.embedCode } } // Must be Iframe embed code as others do not work in Gutenberg
+					id={ `cog-form-${ this.state.uniqueId }` }
 				></div>
 			</div>
 		);
diff --git a/src/styles/editor.scss b/src/styles/editor.scss
index 112089d..b989508 100644
--- a/src/styles/editor.scss
+++ b/src/styles/editor.scss
@@ -19,9 +19,39 @@
 // 	height: 500px;
 // }
 
-.focus-grabber {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	z-index: 1;
+.form-preview {
+	min-height: 200px;
+
+	.focus-grabber {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		z-index: 1;
+	}
+
+	.loader {
+		padding: 1em;
+		background: #fff;
+		text-align: center;
+		min-height: 200px;
+		border-radius: 2px;
+		box-shadow: inset 0 0 0 1px #1e1e1e;
+
+		display: flex;
+		gap: 0.5em;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+
+		.icon {
+			width: 2em;
+			height: 2em;
+			margin: 0 auto;
+		}
+
+		p {
+			font-size: 13px;
+			margin: 0;
+		}
+	}
 }