Disable submit button while submitting

components/submit.js

@@ -6,6 +6,10 @@ const bg = {
     bg: 'blue',
     backgroundImage: theme.util.gradient('cyan', 'blue')
   },
+  submitting: {
+    bg: 'blue',
+    backgroundImage: theme.util.gradient('cyan', 'blue')
+  },
   success: {
     bg: 'green',
     backgroundImage: theme.util.gradient('green', 'cyan')
@@ -17,9 +21,20 @@ const bg = {
   }
 }
 
+const submitting = {
+  ...bg.default,
+  opacity: 0.5,
+  pointerEvents: 'none',
+  cursor: 'not-allowed'
+}
+
 const Submit = ({
   status,
-  labels = { default: 'Submit', error: 'Error!', success: 'Submitted!' },
+  labels = {
+    default: 'Submit',
+    error: 'Error!',
+    success: 'Submitted!'
+  },
   width = '100%',
   sx,
   ...props
@@ -33,10 +48,11 @@ const Submit = ({
       mt: 3,
       fontSize: 2,
       width,
-      ...bg[status],
+      ...(status === 'submitting' ? submitting : bg[status]),
       ...sx
     }}
-    children={labels[status]}
+    disabled={status === 'submitting'}
+    children={status === 'submitting' ? 'Submitting…' : labels[status]}
     {...props}
   />
 )

lib/use-form.js

@@ -6,7 +6,7 @@ const useForm = (
   callback,
   options = { clearOnSubmit: 2000, method: 'post' }
 ) => {
-  const [status, setStatus] = useState('default')
+  const [status, setStatus] = useState('submitting')
   const [data, setData] = useState({})
   const [touched, setTouched] = useState({})
 
@@ -42,6 +42,7 @@ const useForm = (
 
   const onSubmit = (e) => {
     e.preventDefault()
+    setStatus('submitting')
     fetch(action, {
       method,
       body: JSON.stringify(data)