add loading to datagird

src/components/FiDataGrid.js

@@ -11,7 +11,7 @@ import { TablePagination, Typography } from '@mui/material';
 
 export function FiDataGrid({ rows, columns, sx, autoHeight,
     hideFooterSelectedRowCount, rowModesModel, editMode,
-    pageSizeOptions, filterItems, customPageSize, doLoad, ...props }) {
+    pageSizeOptions, filterItems, customPageSize, doLoad, onGridReady, ...props }) {
     const intl = useIntl();
     const [_rows, set_rows] = useState([]);
     const [_doLoad, set_doLoad] = useState({});
@@ -20,6 +20,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
     const [_editMode, set_editMode] = useState("row");
     const [_pageSizeOptions, set_pageSizeOptions] = useState([10]);
     const [_filterItems, set_filterItems] = useState([]);
+    const [loading, setLoading] = useState(false);
 
     const [page, setPage] = useState(0);
     const [pageSize, setPageSize] = useState(10);
@@ -52,8 +53,15 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
     useEffect(() => {
         setPage(0);
         set_doLoad(doLoad);
+        setLoading(true)
     }, [doLoad]);
 
+    useEffect(() => {
+        setPage(0);
+        set_doLoad(doLoad);
+        setLoading(true)
+    }, [onGridReady]);
+
     useEffect(() => {
         getDataList();
     }, [_doLoad, page]);
@@ -127,6 +135,11 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
                 if (_doLoad.callback != null) {
                     _doLoad.callback(responseData);
                 }
+                setLoading(false)
+            },
+            onError: function (error){
+                console.log(error)
+                setLoading(false)
             }
         });
     }
@@ -148,6 +161,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
             hideFooterSelectedRowCount={myHideFooterSelectedRowCount}
             filterModel={{ items: _filterItems }}
             sx={_sx}
+            loading={loading}
             components={{
                 noRowsOverlay: CustomNoRowsOverlay,
                 Pagination: () => (

src/pages/PublicNotice/Search_GLD/DataGrid.js

@@ -20,7 +20,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import * as utils from "auth/utils"
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SearchPublicNoticeTable({ searchCriteria }) {
+export default function SearchPublicNoticeTable({ searchCriteria, onGridReady }) {
 
     const [rows, setRows] = React.useState([]);
     const navigate = useNavigate()
@@ -184,6 +184,7 @@ export default function SearchPublicNoticeTable({ searchCriteria }) {
                 customPageSize={10}
                 getRowHeight={() => 'auto'}
                 onRowDoubleClick={handleRowDoubleClick}
+                onGridReady={onGridReady}
                 doLoad={React.useMemo(() => ({
                     url: GET_PUBLIC_NOTICE_LIST,
                     params: _searchCriteria,

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -21,7 +21,7 @@ import {DemoItem} from "@mui/x-date-pickers/internals/demo";
 import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
 import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, issueComboData
+const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, issueComboData, setSearchReady
 }) => {
 
     const [type, setType] = React.useState([]);
@@ -76,6 +76,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
             groupNo: data.groupNo,
         };
         applySearch(temp);
+        setSearchReady(true)
     };
 
     React.useEffect(() => {

src/pages/PublicNotice/Search_GLD/index.js

@@ -36,6 +36,7 @@ const UserSearchPage_Individual = () => {
         dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14))
     });
     const [onReady, setOnReady] = React.useState(false);
+    const [onGridReady, setGridOnReady] = React.useState(false);
 
     React.useEffect(() => {
         getOrgCombo();
@@ -67,9 +68,15 @@ const UserSearchPage_Individual = () => {
     }
 
     function applySearch(input) {
+        setGridOnReady(false);
         setSearchCriteria(input);
     }
 
+    function setSearchReady(input) {
+        setGridOnReady(input);
+    }
+
+
     return (
         !onReady ?
             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
@@ -93,6 +100,7 @@ const UserSearchPage_Individual = () => {
                         orgComboData={orgCombo}
                         issueComboData={issueCombo}
                         searchCriteria={searchCriteria}
+                        setSearchReady={setSearchReady}
                     />
                 </Grid>
                 {/*row 2*/}
@@ -104,7 +112,8 @@ const UserSearchPage_Individual = () => {
                     >
                         <EventTable
                             searchCriteria={searchCriteria}
-                        />
+                            onGridReady={onGridReady}
+                    />
                     </MainCard>
                 </Grid>
             </Grid>

src/utils/HttpUtils.js

@@ -155,7 +155,7 @@ const handleError = (error, onError) => {
     if (onError) {
         return onError(error);
     } else {
-        console.log(error);
+        // console.log(error);
         return false;
     }
 }