disable form fields when form is submitting

src/components/atoms/Input/index.module.css

@@ -3,6 +3,11 @@
   position: relative;
 }
 
+.field[data-is-submitting] {
+  pointer-events: none;
+  opacity: 0.4;
+}
+
 .field .field {
   margin-bottom: calc(var(--spacer) / 2);
 }

src/components/atoms/Input/index.tsx

@@ -3,7 +3,8 @@ import InputElement from './InputElement'
 import Help from './Help'
 import Label from './Label'
 import styles from './index.module.css'
-import { ErrorMessage } from 'formik'
+import { ErrorMessage, FormikState, FieldProps, FieldInputProps } from 'formik'
+import { MetadataPublishForm } from '../../../@types/Metadata'
 
 export interface InputProps {
   name: string
@@ -28,19 +29,18 @@ export interface InputProps {
   pattern?: string
   min?: string
   disabled?: boolean
-  field?: {
-    name: string
-    value: string
-    onChange: () => void
-    onBlur: () => void
-  }
+  field?: FieldInputProps<any>
+  form?: FormikState<any>
 }
 
 export default function Input(props: Partial<InputProps>): ReactElement {
   const { required, name, label, help, additionalComponent, field } = props
 
   return (
-    <div className={styles.field}>
+    <div
+      className={styles.field}
+      data-is-submitting={props.form && props.form.isSubmitting ? true : null}
+    >
       <Label htmlFor={name} required={required}>
         {label}
       </Label>

src/components/pages/Publish/PublishForm.tsx

@@ -86,7 +86,7 @@ export default function PublishForm({
       ])
 
       // User feedback and redirect to new asset detail page
-      toast.success('asset created successfully')
+      ddo && toast.success('asset created successfully')
       toast.dismiss(submittingToast)
 
       // TODO: reset form state and make sure persistant form in localStorage is cleared