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>
+      {!isCreating ? (
-      <div className="mailpoet_custom_field_add_form">
+        <>
-        <hr />
+          <p>Create a new custom field for your subscribers.</p>
-        <SelectControl
+          <div className="mailpoet_custom_field_add_form">
-          label="Select a field type"
+            <hr />
-          options={customFieldTypes}
+            <SelectControl
-          onChange={(value) => {
+              label="Select a field type"
-            setFieldSettings(null);
+              options={customFieldTypes}
-            setFieldType(value);
+              onChange={(value) => {
-          }}
+                setFieldSettings(null);
-        />
+                setFieldType(value);
-        <TextControl
+              }}
-          label="Field name"
+            />
-          onChange={setFieldName}
+            <TextControl
-        />
+              label="Field name"
-        <hr />
+              onChange={setFieldName}
-        {renderSettingsForType()}
+            />
-        <Button
+            <hr />
-          isLarge
+            {renderSettingsForType()}
-          isDefault
+            <Button
-          disabled={!canSubmit()}
+              isLarge
-          onClick={() => {
+              isDefault
-            const data = {
+              disabled={!canSubmit()}
-              name: fieldName,
+              onClick={() => {
-              type: fieldType,
+                const data = {
-              params: mapCustomFieldFormData(fieldType, fieldSettings),
+                  name: fieldName,
-            };
+                  type: fieldType,
-            createCustomField(data, clientId);
+                  params: mapCustomFieldFormData(fieldType, fieldSettings),
-          }}
+                };
-        >
+                createCustomField(data, clientId);
-          {'Create'}
+              }}
-        </Button>
+            >
-      </div>
+              {'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',