feat: add modal loader for each API request

src/component/TopupsaldoModal.js

@@ -1,20 +1,21 @@
-import React from "react";
+import React, {useContext} from "react";
 import {Form, Input, message, Modal} from "antd";
 import {observer} from "mobx-react-lite";
 import {useStore} from "../utils/useStore";
+import {ModalLoaderContext} from "../utils/modal";
 
 export const TopupsaldoModal = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
+  const modalLoader = useContext(ModalLoaderContext);
 
   const handleCancelTransaction = () => {
     store.supplier.visibleModalTransaction = false;
   };
 
   const handleSubmitTransaction = async (data) => {
-    console.log(data, "isi data2");
-
     try {
+      modalLoader.setLoading(true);
       await store.supplier.createTransaction(data);
       message.success("Success Top Up");
     } catch (e) {
@@ -22,9 +23,11 @@ export const TopupsaldoModal = observer((props) => {
       message.error("Failed Top Up");
     }
 
+    modalLoader.setLoading(false);
     store.supplier.visibleModalTransaction = false;
     form.resetFields();
   };
+  
   return (
     <div>
       <Modal
@@ -50,23 +53,23 @@ export const TopupsaldoModal = observer((props) => {
         }}
       >
         <Form
-            form={form}
-            layout="vertical"
-            initialValues={{supplier: store.supplier.code}}
+          form={form}
+          layout="vertical"
+          initialValues={{supplier: store.supplier.code}}
         >
           <Form.Item
-              name="supplier"
-              label="Supplier"
-              rules={[{required: true, message: "Please input supplier!"}]}
+            name="supplier"
+            label="Supplier"
+            rules={[{required: true, message: "Please input supplier!"}]}
           >
-            <Input disabled={true} />
+            <Input disabled={true}/>
           </Form.Item>
           <Form.Item
-              name="amount"
+            name="amount"
             label="Amount"
-            rules={[{ required: true, message: "Please input amount!" }]}
+            rules={[{required: true, message: "Please input amount!"}]}
           >
-            <Input />
+            <Input/>
           </Form.Item>
         </Form>
       </Modal>