cognito-forms
/
cognitoforms-wordpress
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add loading indicator

This commit is contained in:
Michael Thomas 2022-01-27 19:31:42 -05:00
parent 5b266e021c
commit 429fee8a03
2 changed files with 61 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/preview-form.tsx
View File

@ -4,7 +4,10 @@
import * as React from 'react'; import * as React from 'react';
import * as _ from 'lodash'; import * as _ from 'lodash';
import { Spinner } from '@wordpress/components';
import { baseUrl } from '@/globals'; import { baseUrl } from '@/globals';
import { ReactComponent as CogIcon } from '@/assets/cogicon.svg';
type PreviewProps = { type PreviewProps = {
formId: string; formId: string;
@ -13,6 +16,7 @@ type PreviewProps = {
type PreviewState = { type PreviewState = {
uniqueId: string; uniqueId: string;
loading: boolean;
}; };
class PreviewForm extends React.Component<PreviewProps, PreviewState> { 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. // and removed from the page once it is no longer needed.
this.state = { this.state = {
uniqueId: _.uniqueId(), uniqueId: _.uniqueId(),
loading: true,
}; };
} }
componentDidMount() { componentDidMount() {
this.loadEmbedScript(); this.loadEmbedScript( this.formReady.bind( this ) );
} }
componentWillUnmount() { componentWillUnmount() {
@ -61,13 +66,32 @@ class PreviewForm extends React.Component<PreviewProps, PreviewState> {
} }
} }
// Check if form is loaded
formReady() {
this.setState( { loading: false } );
}
render() { render() {
return ( return (
<div> <div className="form-preview">
<div className="focus-grabber"></div> <div className="focus-grabber"></div>
{ this.state.loading &&
<div className="loader">
<div className="icon">
<CogIcon />
</div>
<p>
Loading...
</p>
<Spinner />
</div>
}
<div <div
className="cog-wp-embed cog-wp-embed__preview" 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 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>
</div> </div>
); );

40
src/styles/editor.scss
View File

@ -19,9 +19,39 @@
// height: 500px; // height: 500px;
// } // }
.focus-grabber { .form-preview {
position: absolute; min-height: 200px;
width: 100%;
height: 100%; .focus-grabber {
z-index: 1; 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;
}
}
} }