Display spinner when custom field is being created

[MAILPOET-2463]

assets/js/src/form_editor/blocks/add_custom_field/edit.jsx

@@ -5,6 +5,7 @@ import {
   Button,
   SelectControl,
   TextControl,
+  Spinner,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -58,6 +59,11 @@ const AddCustomField = ({ clientId }) => {
     []
   );
 
+  const isCreating = useSelect(
+    (sel) => sel('mailpoet-form-editor').getIsCustomFieldCrating(),
+    []
+  );
+
   const defaultType = dateSettings.dateTypes[0].value;
   const defaultFormat = dateSettings.dateFormats[defaultType][0];
 
@@ -111,39 +117,43 @@ const AddCustomField = ({ clientId }) => {
       icon={<BlockIcon icon={icon} showColors />}
       label="New Custom Field"
     >
-      <p>Create a new custom field for your subscribers.</p>
-      <div className="mailpoet_custom_field_add_form">
-        <hr />
-        <SelectControl
-          label="Select a field type"
-          options={customFieldTypes}
-          onChange={(value) => {
-            setFieldSettings(null);
-            setFieldType(value);
-          }}
-        />
-        <TextControl
-          label="Field name"
-          onChange={setFieldName}
-        />
-        <hr />
-        {renderSettingsForType()}
-        <Button
-          isLarge
-          isDefault
-          disabled={!canSubmit()}
-          onClick={() => {
-            const data = {
-              name: fieldName,
-              type: fieldType,
-              params: mapCustomFieldFormData(fieldType, fieldSettings),
-            };
-            createCustomField(data, clientId);
-          }}
-        >
-          {'Create'}
-        </Button>
-      </div>
+      {!isCreating ? (
+        <>
+          <p>Create a new custom field for your subscribers.</p>
+          <div className="mailpoet_custom_field_add_form">
+            <hr />
+            <SelectControl
+              label="Select a field type"
+              options={customFieldTypes}
+              onChange={(value) => {
+                setFieldSettings(null);
+                setFieldType(value);
+              }}
+            />
+            <TextControl
+              label="Field name"
+              onChange={setFieldName}
+            />
+            <hr />
+            {renderSettingsForType()}
+            <Button
+              isLarge
+              isDefault
+              disabled={!canSubmit()}
+              onClick={() => {
+                const data = {
+                  name: fieldName,
+                  type: fieldType,
+                  params: mapCustomFieldFormData(fieldType, fieldSettings),
+                };
+                createCustomField(data, clientId);
+              }}
+            >
+              {'Create'}
+            </Button>
+          </div>
+        </>
+      ) : (<Spinner />)}
     </Placeholder>
   );
 };

assets/js/src/form_editor/store/selectors.jsx

@@ -59,4 +59,7 @@ export default {
   getDateSettingsData(state) {
     return state.dateSettingData;
   },
+  getIsCustomFieldCrating(state) {
+    return state.isCustomFieldCreating;
+  },
 };

assets/js/src/form_editor/store/store.jsx

@@ -32,6 +32,7 @@ export default () => {
     customFields: window.mailpoet_custom_fields,
     isFormSaving: false,
     isCustomFieldSaving: false,
+    isCustomFieldCreating: false,
     notices: [],
     sidebar: {
       activeTab: 'form',