enquire btn loading

components/detail/DetailInfo.js

@@ -10,6 +10,7 @@ import { sendEnquiry } from "../../redux/actions/enquiryAction.js";
 import { useDispatch, useSelector } from "react-redux";
 import { toast } from "react-toastify";
 import { getCurrentEndUser } from "../../redux/actions/userActions.js";
+import { Loader } from "react-bootstrap-typeahead";
 
 const DetailInfo = ({ activityById }) => {
   const dispatch = useDispatch();
@@ -19,6 +20,7 @@ const DetailInfo = ({ activityById }) => {
 
   // const [session, setSession] = useState(null);
   const [enqDate, setenqDate] = useState();
+  const [loading, setloading] = useState(false);
   const { loadedUser } = useSelector(state => state.loadedUser);
   const { endUser } = useSelector(state => state.endUser);
   // useEffect(() => {
@@ -110,15 +112,18 @@ const DetailInfo = ({ activityById }) => {
             <div className="">{activityById.data.attributes.address}</div>
             <div className="btn-row">
               <Button
+                disabled={loading}
                 onClick={async () => {
+                  setloading(true);
                   console.log("hello");
                   let res = await sendEnquiry({ activityId: activityById.data.id, userId: endUser.id, vendorId: activityById.data.attributes.vendor.data.id });
                   console.log("res", res);
                   toast.success("Enquiry sent successfully, our team will get back to you shortly! Thank you!");
+                  setloading(false);
                 }}
                 variant="primary me-3"
               >
-                Enquire Now
+                {loading ? <Loader /> : "Enquire Now"}
               </Button>
               <Button variant="secondary">
                 Gift Now{" "}