add loader

src/views/SimproV2/CreatedProyek/ReportAnalysis.js

@@ -1,7 +1,21 @@
 import React, {useState, useEffect} from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody } from 'reactstrap';
-import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col, Input } from 'reactstrap';
-import { Button } from 'reactstrap';
+import {
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Card,
+  CardHeader,
+  CardBody,
+  TabContent,
+  TabPane,
+  Nav,
+  NavItem,
+  NavLink,
+  Row,
+  Col,
+  Button
+} from 'reactstrap';
 import axios from "../../../const/interceptorApi";
 import {
   NotificationManager,
@@ -9,7 +23,7 @@ import {
 import { BASE_SIMPRO_LUMEN } from "../../../const/ApiConst";
 import 'antd/dist/antd.css';
 import './style.css'
-import { Select, Table, Tooltip } from 'antd';
+import { Select, Table, Tooltip, Spin } from 'antd';
 import DialogFormAnalysis from './DialogFormAnalysis';
 import moment from "moment";
 const { Option } = Select
@@ -29,6 +43,7 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
   const [hrList, setHrList] = useState([]);
   const [groupedActivity, setGroupedActivity] = useState([]);
   const [selectedHr, setSelectedHr] = useState(null);
+  const [loading, setLoading] = useState(false);
 
   const toggle = (tab) => {
     if (activeTab !== tab) {
@@ -235,12 +250,14 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
 
   useEffect(() => {
     if (search) {
+      setLoading(true);
       getDataActivity()
     }
   }, [search]);
 
   useEffect(() => {
     if (selectedHr) {
+      setLoading(true);
       getDataActivityToHr()
     }
   }, [selectedHr]);
@@ -398,7 +415,9 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
       });
       setAvgActivityHr(sum / dataRes.length);
       setDataTableActivityToHr(dataRes);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error("Gagal Mengambil Data!!", "Failed");
     }
   };
@@ -474,7 +493,9 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
       setSumVolPlan(sumPlan);
       setSumVolAct(sumAct);
       setDatatable(dataRes);
+      setLoading(false);
     } else {
+      setLoading(false);
       NotificationManager.error("Gagal Mengambil Data!!", "Failed");
     }
   };
@@ -531,13 +552,15 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
                       </h1>
                     </div>
                     <div style={{ width: '100%', overflowX: 'auto' }}>
-                      <Table
-                        size="small"
-                        columns={columns}
-                        dataSource={dataTable}
-                        pagination={false}
-                        rowKey="id"
-                      />
+                      <Spin tip="Loading..." spinning={loading}>
+                        <Table
+                          size="small"
+                          columns={columns}
+                          dataSource={dataTable}
+                          pagination={false}
+                          rowKey="id"
+                        />
+                      </Spin>
                     </div>
                   </CardBody>
                 </Card>
@@ -559,13 +582,15 @@ const ReportAnalysis = ({ openDialog, closeDialog, toggleDialog, projectId }) =>
                   </CardHeader>
                   <CardBody style={{ width: '100%' }}>
                     <div style={{ width: '100%', overflowX: 'auto' }}>
-                      <Table
-                        size="small"
-                        columns={columnActivityToHr}
-                        dataSource={dataTableActivityToHr}
-                        pagination={false}
-                        rowKey={"id"}
-                      />
+                      <Spin tip="Loading..." spinning={loading}>
+                        <Table
+                          size="small"
+                          columns={columnActivityToHr}
+                          dataSource={dataTableActivityToHr}
+                          pagination={false}
+                          rowKey={"id"}
+                        />
+                      </Spin>
                     </div>
                   </CardBody>
                 </Card>