diff --git a/components/Constraint/index.js b/components/Constraint/index.js
index b60c294..dfb2755 100644
--- a/components/Constraint/index.js
+++ b/components/Constraint/index.js
@@ -1,15 +1,17 @@
-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';
 
-const Constraint = ({location}) => {
+const Constraint = ({ location }) => {
     const [form] = Form.useForm();
     const [orderId, setOrderId] = useState('');
     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,32 +19,38 @@ const Constraint = ({location}) => {
     }
 
     const onSubmit = async () => {
-        setShow(true)
-        if (show) {
-            try {
-                const res = await botsRepository.api.useCheckTransactionByOrderId(orderId);
-                const resultTransaction = res?.data;
-                setOrderNotFound(false);
-                setOrder(resultTransaction);
-    
-            } catch (err) {
-                setOrderNotFound(true);
+        try {
+            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'}>
-            <Image src={'/assets/images/logo.svg'} width={100} height={50}/>
+            <Image src={'/assets/images/logo.svg'} width={100} height={50} />
 
             <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!"},
+                    { required: true, message: "Silahkan masukan Order ID!" },
                 ]}>
                     <Input
                         className={'rounded-lg'}
@@ -57,13 +65,14 @@ const Constraint = ({location}) => {
                         <Button
                             disabled={
                                 !form.isFieldsTouched(true) ||
-                                !!form.getFieldsError().filter(({errors}) => errors.length).length
+                                !!form.getFieldsError().filter(({ errors }) => errors.length).length
                             }
                             block
                             className={`${!form.isFieldsTouched(true) ||
-                            !!form.getFieldsError().filter(({errors}) => errors.length).length ? 'bg-[#919191]' : 'bg-black'} 
+                                !!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,33 +81,37 @@ const Constraint = ({location}) => {
             </Form>
 
             {orderNotFound || order === undefined ? (
-                <>
-                <h3 className={`font-bold text-xl my-4 ${show ? 'block' : 'hidden'}`}>Status Transaksi</h3>
+                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`}>
-                    <Image src={'/assets/icons/cariparkir.svg'} width={40} height={40}/>
-                    <div className={'flex flex-col'}>
-                        <span className={'font-semibold'}>{orderId}</span>
-                        <span className={'text-[#FB5060] font-semibold text-sm'}>BELUM ADA TRANSAKSI</span>
+                        <div className={`${show ? 'block' : 'hidden'} bg-[#F7FCFC] border-2 border-[#DFDFDF] h-20 flex items-center gap-2 rounded-lg px-5 mt-2`}>
+                            <Image src={'/assets/icons/cariparkir.svg'} width={40} height={40}/>
+                            <div className={'flex flex-col'}>
+                                <span className={'font-semibold'}>{orderId}</span>
+                                <span className={'text-[#FB5060] font-semibold text-sm'}>BELUM ADA TRANSAKSI</span>
+                            </div>
+                        </div>
                     </div>
-                </div>
-                </>
+                )
             ) : order ? (
-                <>
-                <h3 className={`font-bold text-xl my-4 ${show ? 'block' : 'hidden'}`}>Status Transaksi</h3>
+                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`}>
-                    <Image src={'/assets/icons/cariparkir.svg'} width={40} height={40}/>
-                    <div className={'flex flex-col'}>
-                        <span className={'font-semibold'}>{orderId}</span>
+                        <div className={`${show ? 'block' : 'hidden'} bg-[#F7FCFC] border-2 border-[#DFDFDF] h-20 flex items-center gap-2 rounded-lg px-5 mt-2`}>
+                            <Image src={'/assets/icons/cariparkir.svg'} width={40} height={40}/>
+                            <div className={'flex flex-col'}>
+                                <span className={'font-semibold'}>{orderId}</span>
+                            </div>
+                        </div>
+                        <Transaction
+                            show={show}
+                            orderData={order}
+                            location={location}
+                        />
                     </div>
-                </div>
-                <Transaction
-                    show={show}
-                    orderData={order}
-                    location={location}
-                />
-                </>
+                )
             ) : ''}
         </div>
     )