add loader

src/views/SimproV2/ResourceWorker/index.js

@@ -8,7 +8,7 @@ import moment from 'moment'
 import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
 import { DownloadOutlined } from '@ant-design/icons';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
-import { Pagination, Table, Button, Tooltip } from 'antd';
+import { Pagination, Table, Button, Tooltip, Spin } from 'antd';
 import {
   PROYEK_SEARCH, USER_ADD, USER_SEARCH, USER_EDIT, USER_DELETE, ROLE_SEARCH, DIVISI_SEARCH, USER_SHIFT_ADD, USER_SYNC
 } from '../../../const/ApiConst';
@@ -18,6 +18,7 @@ const proyek_id = localStorage.getItem('proyek_id');
 const role_id = localStorage.getItem('role_id');
 const format = "DD-MM-YYYY";
 const token = window.localStorage.getItem('token');
+
 const config = {
   headers:
   {
@@ -53,12 +54,15 @@ const ResourceWorker = ({ params }) => {
   const [typeDialogShift, setTypeDialogShift] = useState('Save')
   const pageName = params.name;
   const { t } = useTranslation();
+  const [loading, setLoading] = useState(true);
+
   useEffect(() => {
     getRoleList()
     getDivisiList()
   }, [])
 
   useEffect(() => {
+    setLoading(true);
     getDataUser()
   }, [search, rowsPerPage, currentPage])
 
@@ -206,7 +210,9 @@ const ResourceWorker = ({ params }) => {
     if (result && result.data && result.data.code == 200) {
       setDatatable(result.data.data);
       setTotalPage(result.data.totalRecord);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
     }
   }
@@ -560,7 +566,7 @@ const ResourceWorker = ({ params }) => {
             <Col>
               <Tooltip title={t('hradd')}>
                 <Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
-              </Tooltip> 
+              </Tooltip>
               <Tooltip title="HR Sync">
                 <Button style={{ background: "#007bff ", color: "#fff", marginLeft: "5px" }} onClick={() => handleSync()}><i className="fa fa-spinner"></i></Button>
               </Tooltip>
@@ -571,7 +577,9 @@ const ResourceWorker = ({ params }) => {
           </Row>
         </CardHeader>
         <CardBody>
-          {RenderTable}
+          <Spin tip="Loading..." spinning={loading}>
+            {RenderTable}
+          </Spin>
           <Pagination
             style={{ marginTop: "25px" }}
             showSizeChanger