Add loading indicator

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>
 		);