Added loading height

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import ModalCom from "../../Helpers/ModalCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 function ConfirmNairaWithdraw({
   payment,
@@ -23,12 +24,14 @@ function ConfirmNairaWithdraw({
 
   const [completeNairaWithdraw, setShowCompleteNairaWithdraw] = useState({
     show: false,
+    load: false,
     state: {},
   }); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
 
   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = () => {
     setRequestStatus({ message: "", loading: true, status: false });
+    setShowCompleteNairaWithdraw({ load: true });
     let reqData = {
       amount: Number(state.amount * 100),
       Fee: Number(state.fee),
@@ -61,22 +64,32 @@ function ConfirmNairaWithdraw({
           //     status: false,
           //   });
           // }
-          return setTimeout(
+          return setTimeout(() => {
-            () =>
+            setRequestStatus({
-              setRequestStatus({
+              message: "",
-                message: "",
+              loading: false,
-                loading: false,
+              status: false,
-                status: false,
+            });
-              }),
+            setShowCompleteNairaWithdraw({
-            setShowCompleteNairaWithdraw({ show: true, state: res.data }),
+              show: true,
-            5000
+              load: false,
-          );
+              state: res.data,
+            });
+          }, 5000);
         }
 
         setTimeout(() => {
-          setShowCompleteNairaWithdraw({ show: true, state: res.data });
+          setRequestStatus({
-        }, 1000);
+            message: "",
-        console.log(res.data);
+            loading: false,
+            status: false,
+          });
+          setShowCompleteNairaWithdraw({
+            show: true,
+            load: false,
+            state: res.data,
+          });
+        }, 5000);
         return;
       })
       .catch((error) => {
@@ -108,7 +121,7 @@ function ConfirmNairaWithdraw({
           <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
             <h2 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
               {completeNairaWithdraw.show
-                ? completeNairaWithdraw?.state?.internal_return > 0
+                ? completeNairaWithdraw?.state?.internal_return >= 0
                   ? "Transfer Success"
                   : "Transfer Error"
                 : `Withdraw from ${wallet.description} Wallet : ${
@@ -143,7 +156,11 @@ function ConfirmNairaWithdraw({
           </div>
           <hr />
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
-            {completeNairaWithdraw.show ? (
+            {completeNairaWithdraw.load ? (
+              <div className="h-[35rem] flex items-center justify-center">
+                <LoadingSpinner size="12" color="sky-blue" />
+              </div>
+            ) : completeNairaWithdraw.show ? (
               <div className="px-4 md:p-8 py-4 add-fund-info">
                 <div className="field w-full mb-3 min-h-[23rem]">
                   <div className="flex items-center w-full justify-center mb-3">
@@ -356,35 +373,51 @@ function ConfirmNairaWithdraw({
               </div>
             )}
 
-            <hr />
+            {!completeNairaWithdraw.load && (
-            <p
+              <>
-              className={`text-base ${
+                {" "}
-                requestStatus.status ? "text-green-500" : "text-red-500"
+                <hr />
-              } px-4 md:px-8 py-4 h-5`}
+                <p
-            >
+                  className={`text-base ${
-              {requestStatus.message && requestStatus.message}
+                    requestStatus.status ? "text-green-500" : "text-red-500"
-            </p>
+                  } px-4 md:px-8 py-4 h-5`}
-            <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
-              {!completeNairaWithdraw.show && (
-                <button
-                  type="button"
-                  onClick={state?.choice === "prev" ? getBack : action}
-                  className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
                 >
-                  <span className="text-gradient">
+                  {requestStatus.message && requestStatus.message}
-                    {state?.choice === "prev" ? "Back" : "Cancel"}
+                </p>
-                  </span>
+                <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
-                </button>
+                  {!completeNairaWithdraw.show && (
-              )}
+                    <button
-              <button
+                      type="button"
-                onClick={
+                      onClick={action}
-                  completeNairaWithdraw.show ? completeWithdrawal : handleSubmit
+                      className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
-                }
+                    >
-                className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px]"
+                      <span className="text-gradient">Cancel</span>
-              >
+                    </button>
-                {completeNairaWithdraw.show ? "Okay" : "Transfer"}
+                  )}
-              </button>
+
-            </div>
+                  <button
+                    onClick={
+                      completeNairaWithdraw.show
+                        ? completeWithdrawal
+                        : completeNairaWithdraw?.state?.internal_return < 0
+                        ? action
+                        : handleSubmit
+                    }
+                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer min-w-[100px]"
+                  >
+                    {requestStatus.loading ? (
+                      <LoadingSpinner size="6" color="sky-blue" />
+                    ) : completeNairaWithdraw.show ? (
+                      "Okay"
+                    ) : completeNairaWithdraw?.state?.internal_return < 0 ? (
+                      "Cancel"
+                    ) : (
+                      "Transfer"
+                    )}
+                  </button>
+                </div>
+              </>
+            )}
           </div>
         </div>
       </div>