update filter name

src/views/SimproV2/CreatedProyek/DialogUserGantt.js

@@ -3,7 +3,7 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { Button, Form } from 'reactstrap';
 import axios from "../../../const/interceptorApi";
 import { USER_VERSION_GANTT_ADDS, USER_VERSION_GANTT_SEARCH, USER_LIST } from '../../../const/ApiConst';
-import { Transfer } from 'antd';
+import { Transfer, Spin } from 'antd';
 import 'antd/dist/antd.css';
 
 const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt }) => {
@@ -17,7 +17,7 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
   const [id, setId] = useState(0)
   const [targetKeys, setTargetKeys] = useState([])
   const [humanResource, setHumanResource] = useState([])
-  
+  const [loading, setLoading] = useState(true);
 
   const handleCLearData = () => {
     setId(0)
@@ -64,6 +64,7 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
   }
 
   const getUserGantt = async () => {
+    setLoading(true)
     const payload = {
       "columns": [
         { "name": "version_gantt_id", "logic_operator": "=", "value": idGantt, "operator": "AND" }
@@ -77,6 +78,7 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
     if (result && result.status == 200) {
       console.log("cek resource get user gantt", result.data.data)
       setUserGantt(result.data.data);
+      setLoading(false)
     } else {
 
     }
@@ -135,6 +137,9 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
       }}>
         <Transfer
           showSearch
+          filterOption={(inputValue, option) =>
+            option.title.toLowerCase().includes(inputValue.toLowerCase())
+          }
           titles={['Available HR', 'Granted to']}
           dataSource={humanResource}
           targetKeys={targetKeys}
@@ -155,7 +160,9 @@ const DialogUserGantt = ({ openDialog, closeDialog, toggleDialog, idGantt}) => {
       <Modal size="lg" style={{ maxWidth: '600px', width: '100%' }} isOpen={openDialog} toggle={toggleDialog}>
         <ModalHeader className="capitalize" toggle={closeDialog}>Gantt Permission</ModalHeader>
         <ModalBody>
+          <Spin tip="Loading..." spinning={loading}>
             {renderForm()}
+          </Spin>
         </ModalBody>
         <ModalFooter>
           <Button color="primary" onClick={() => handleSave()}>Save</Button>{' '}