feat: add loading

components/Constraint/index.js

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import Image from "next/image";
-import {Button, Form, Input} from "antd";
+import {Button, Form, Input, Spin} from "antd";
 import Transaction from "../Transaction";
 import { botsRepository } from '../../repository/bots';
 
@@ -10,6 +10,8 @@ const Constraint = ({location}) => {
     const [order, setOrder] = useState('');
     const [orderNotFound, setOrderNotFound] = useState(false);
     const [show, setShow] = useState(false)
+    const [loading, setLoading] = useState(false)
+    const inputRef = useRef(null)
 
     const handleChangeCheckTransaction = (e) => {
         const value = e.target.value
@@ -17,21 +19,27 @@ const Constraint = ({location}) => {
     }
 
     const onSubmit = async () => {
-        setShow(true)
-        if (show) {
         try {
-                const res = await botsRepository.api.useCheckTransactionByOrderId(orderId);
+            setLoading(true)
+            const value = await form.getFieldValue()
+            if (inputRef.current) {
+                setShow(true)
+            }
+            const res = await botsRepository.api.useCheckTransactionByOrderId(value?.order_id);
             const resultTransaction = res?.data;
             setOrderNotFound(false);
             setOrder(resultTransaction);
+            setTimeout(() => {
+                setLoading(false)
+            }, 1000);
 
         } catch (err) {
+            if (err) {
+                setLoading(false)
+            }
             setOrderNotFound(true);
         }
     }
-    }
-
-    console?.log(order, "ini ordernya")
 
     return (
         <div className={'bg-white px-7 pt-4 pb-8 mt-6'}>
@@ -40,7 +48,7 @@ const Constraint = ({location}) => {
             <h3 className={'text-lg font-bold'}>Ada kendala dengan transaksimu?</h3>
             <p>Cek transaksi dengan Order ID pembayaran:</p>
 
-            <Form form={form} layout={'vertical'}>
+            <Form form={form} layout={'vertical'} onFinish={onSubmit}>
                 <Form.Item name="order_id" rules={[
                     { required: true, message: "Silahkan masukan Order ID!" },
                 ]}>
@@ -63,7 +71,8 @@ const Constraint = ({location}) => {
                             className={`${!form.isFieldsTouched(true) ||
                                 !!form.getFieldsError().filter(({ errors }) => errors.length).length ? 'bg-[#919191]' : 'bg-black'} 
                                 text-white text-xl h-12 rounded-lg`}
-                            onClick={onSubmit}
+                            htmlType={'submit'}
+                            ref={inputRef}
                         >
                             Cek
                         </Button>
@@ -72,7 +81,8 @@ const Constraint = ({location}) => {
             </Form>
 
             {orderNotFound || order === undefined ? (
-                <>
+                loading ? (<Spin className='flex justify-center'/>) : (
+                    <div>                
                         <h3 className={`font-bold text-xl my-4 ${show ? 'block' : 'hidden'}`}>Status Transaksi</h3>
 
                         <div className={`${show ? 'block' : 'hidden'} bg-[#F7FCFC] border-2 border-[#DFDFDF] h-20 flex items-center gap-2 rounded-lg px-5 mt-2`}>
@@ -82,9 +92,11 @@ const Constraint = ({location}) => {
                                 <span className={'text-[#FB5060] font-semibold text-sm'}>BELUM ADA TRANSAKSI</span>
                             </div>
                         </div>
-                </>
+                    </div>
+                )
             ) : order ? (
-                <>
+                loading ? (<Spin className='flex justify-center'/>) : (
+                    <div>
                         <h3 className={`font-bold text-xl my-4 ${show ? 'block' : 'hidden'}`}>Status Transaksi</h3>
 
                         <div className={`${show ? 'block' : 'hidden'} bg-[#F7FCFC] border-2 border-[#DFDFDF] h-20 flex items-center gap-2 rounded-lg px-5 mt-2`}>
@@ -98,7 +110,8 @@ const Constraint = ({location}) => {
                             orderData={order}
                             location={location}
                         />
-                </>
+                    </div>
+                )
             ) : ''}
         </div>
     )