Submit message button

components/PropertyContactForm.jsx

@@ -1,23 +1,10 @@
 'use client';
 import { useEffect } from 'react';
-import { useFormState, useFormStatus } from 'react-dom';
+import { useFormState } from 'react-dom';
 import { useSession } from 'next-auth/react';
 import { toast } from 'react-toastify';
 import addMessage from '@/app/actions/addMessage';
-import { FaPaperPlane } from 'react-icons/fa';
+import SubmitMessageButton from './SubmitMessageButton';
-
-const SubmitMessageButton = () => {
-  const status = useFormStatus();
-  return (
-    <button
-      className='bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline flex items-center justify-center'
-      type='submit'
-    >
-      <FaPaperPlane className='mr-2' />{' '}
-      {status.pending ? 'Sending...' : 'Send Message'}
-    </button>
-  );
-};
 
 const PropertyContactForm = ({ property }) => {
   const { data: session } = useSession();

components/SubmitMessageButton.jsx

@@ -0,0 +1,16 @@
+import { useFormStatus } from 'react-dom';
+import { FaPaperPlane } from 'react-icons/fa';
+
+const SubmitMessageButton = () => {
+  const { pending } = useFormStatus();
+  return (
+    <button
+      className='bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline flex items-center justify-center'
+      type='submit'
+      disabled={pending}
+    >
+      <FaPaperPlane className='mr-2' />{' '}
+      {pending ? 'Sending...' : 'Send Message'}
+    </button>
+  );
+};