fix(@tinacms/react-sidebar): disable "create" button while waiting fo…

…r submit response
tinacms · Apr 20, 2021 · 1acc297 · 1acc297
1 parent 82e56ed
commit 1acc297
Showing 1 changed file with 19 additions and 4 deletions.
diff --git a/packages/@tinacms/react-sidebar/src/components/CreateContentMenu.tsx b/packages/@tinacms/react-sidebar/src/components/CreateContentMenu.tsx
@@ -99,31 +99,46 @@ const FormModal = ({ plugin, close }: any) => {
         actions: [],
         fields: plugin.fields,
         initialValues: plugin.initialValues || {},
-        onSubmit(values) {
-          plugin.onSubmit(values, cms).then(() => {
+        onSubmit: async values => {
+          await plugin.onSubmit(values, cms).then(() => {
             close()
           })
         },
       }),
     [close, cms, plugin]
   )
+
+  const [busy, setBusy] = React.useState(false)
+
   return (
     <Modal>
       <FormBuilder form={form}>
         {({ handleSubmit }) => {
+          const awaitedHandleSubmit = () => {
+            setBusy(true)
+            handleSubmit()?.finally(() => {
+              setBusy(false)
+            })
+          }
           return (
             <ModalPopup>
               <ModalHeader close={close}>{plugin.name}</ModalHeader>
               <ModalBody
                 onKeyPress={e =>
-                  e.charCode === 13 ? (handleSubmit() as any) : null
+                  e.charCode === 13 && !busy
+                    ? (awaitedHandleSubmit() as any)
+                    : null
                 }
               >
                 <FieldsBuilder form={form} fields={form.fields} />
               </ModalBody>
               <ModalActions>
                 <Button onClick={close}>Cancel</Button>
-                <Button onClick={handleSubmit as any} primary>
+                <Button
+                  disabled={busy}
+                  onClick={awaitedHandleSubmit as any}
+                  primary
+                >
                   Create
                 </Button>
               </ModalActions>