feat: HOC that sets a loading state

app/containers/Products/ProductCreatorContainer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {createFragmentContainer, RelayProp} from 'react-relay';
-import JsonSchemaForm, {IChangeEvent} from '@rjsf/core';
+import RJSF, {IChangeEvent} from '@rjsf/core';
 import {Button, Card} from 'react-bootstrap';
 import FormObjectFieldTemplate from 'containers/Forms/FormObjectFieldTemplate';
 import FormArrayFieldTemplate from 'containers/Forms/FormArrayFieldTemplate';
@@ -10,7 +10,9 @@ import {CiipProductState} from 'createProductMutation.graphql';
 import {JSONSchema7} from 'json-schema';
 import productSchema from './product-schema.json';
 import HeaderWidget from 'components/HeaderWidget';
+import withPromiseLoading from 'lib/withPromiseLoading';
 
+const JsonSchemaForm = withPromiseLoading(RJSF, 'onSubmit', 'disabled');
 interface Props {
   relay: RelayProp;
   toggleShowCreateForm: (...args: any[]) => void;

app/lib/withPromiseLoading.tsx

@@ -0,0 +1,27 @@
+import React, {useState} from 'react';
+
+const withPromiseLoading = function a(
+  Component: React.ComponentClass | React.FunctionComponent,
+  asyncEventHandler: string,
+  isInFlightProp: string
+) {
+  return (props) => {
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleAsyncEvent = async (...args) => {
+      setIsLoading(true);
+      await props[asyncEventHandler](...args);
+      setIsLoading(false);
+    };
+
+    const childProps = {
+      ...props,
+      [isInFlightProp]: isLoading,
+      [asyncEventHandler]: handleAsyncEvent
+    };
+
+    return <Component {...childProps} />;
+  };
+};
+
+export default withPromiseLoading;