add loader

src/views/SimproV2/CreatedProyek/DialogHierarchy.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { Modal, ModalHeader, ModalBody, } from 'reactstrap';
 import { Button } from 'reactstrap';
-import { Space, Table, Tooltip } from 'antd';
+import { Space, Table, Tooltip, Spin } from 'antd';
 import 'antd/dist/antd.css';
 import moment from 'moment';
 import SweetAlert from 'react-bootstrap-sweetalert';
@@ -41,8 +41,10 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
   const [idGantt, setIdGantt] = useState(0)
   const [humanResource, setHumanResource] = useState([])
   const { t } = useTranslation();
+  const [loading, setLoading] = useState(true);
   useEffect(() => {
     if (idTask > 0) {
+      setLoading(true);
       getdataHierarchy();
     }
   }, [saveHierarchy, idTask, openDialog, closeDialog, openDialogFormGantt])
@@ -157,7 +159,9 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
     if (result && result.status == 200) {
       const sortedData = _.orderBy(result.data.data, ['name'], ['asc']);
       setDataHierarchy(sortedData);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error(`Data gantt project gagal terload silahkan coba lagi!`, 'Failed!!');
     }
   }
@@ -285,9 +289,11 @@ const DialogHierarchy = ({ openDialog, closeDialog, toggleDialog, idTask, proyek
           </Tooltip>
         </ModalHeader>
         <ModalBody>
-          <div style={{ width: '100%', overflow: "auto" }}>
-            {RenderTable}
-          </div>
+          <Spin tip="Loading..." spinning={loading}>
+            <div style={{ width: '100%', overflow: "auto" }}>
+              {RenderTable}
+            </div>
+          </Spin>
         </ModalBody>
         {/* <ModalFooter>
           <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>