From 4536d9445d5ed51527dd8cdd48b84a78a8929f25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kimjh=28=EA=B9=80=EC=9E=A5=ED=98=84=29?= <kjh@palnet.co.kr>
Date: Tue, 27 Sep 2022 10:25:37 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EC=9D=B4=EB=A0=A5=20=20loadi?=
 =?UTF-8?q?ng=20spinner=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../analysis/history/AnalysisHistoryGrid.js   | 32 +++-----
 src/components/crud/grid/GridDatatable.js     | 77 +++++++------------
 2 files changed, 41 insertions(+), 68 deletions(-)

diff --git a/src/components/analysis/history/AnalysisHistoryGrid.js b/src/components/analysis/history/AnalysisHistoryGrid.js
index ff8545f..4b7ccd2 100644
--- a/src/components/analysis/history/AnalysisHistoryGrid.js
+++ b/src/components/analysis/history/AnalysisHistoryGrid.js
@@ -1,27 +1,10 @@
 import { GridDatabase } from '../../../components/crud/grid/GridDatatable';
-import {
-  Row,
-  Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  Card,
-  CardHeader,
-  CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
-  Button,
-  Input,
-  CustomInput,
-  FormGroup
-} from 'reactstrap';
+import { Card, Spinner } from 'reactstrap';
 import { ExcelExportButton } from '../../crud/excel/ExcelExportButton';
+import { useSelector } from 'react-redux';
 
 export const AnalysisHistoryGrid = props => {
+  const { loading } = useSelector(state => state.loadingReducer);
   return (
     // <div className='pal-card-box'>
     // <Row>
@@ -46,6 +29,15 @@ export const AnalysisHistoryGrid = props => {
             {/* <div className='no-dataTable'>
                  표시할 데이터가 없습니다.
                 </div> */}
+            {loading ? (
+              <div className='grid-loading'>
+                <div>
+                  <Spinner color='primary' />
+                  <span>Loading...</span>
+                </div>
+              </div>
+            ) : null}
+
             <GridDatabase
               title={'비행이력'}
               data={props.data}
diff --git a/src/components/crud/grid/GridDatatable.js b/src/components/crud/grid/GridDatatable.js
index 76f1c1f..07aef16 100644
--- a/src/components/crud/grid/GridDatatable.js
+++ b/src/components/crud/grid/GridDatatable.js
@@ -7,57 +7,38 @@ import {
   File,
   ChevronDown
 } from 'react-feather';
-import { useSelector } from 'react-redux';
-import LoadingSpinner from '../../../@core/components/spinner/Loading-spinner';
-import { Spinner } from 'reactstrap';
-export const GridDatabase = props => {
-  const { loading } = useSelector(state => state.loadingReducer);
 
+export const GridDatabase = props => {
   return props[`${props.handlerPageChange ? 'total' : 'count'}`] <= 0 ? (
     <div className='no-dataTable'>표시할 데이터가 없습니다.</div>
   ) : (
-    <DataTable
-      noHeader
-      pagination={props.pagination}
-      paginationTotalRows={props.total}
-      // paginationServer
-      subHeader={false}
-      columns={props.columns}
-      responsive={true}
-      sortIcon={<ChevronDown />}
-      className='react-dataTable pal-dateTable'
-      // defaultSortField='invoiceId'
-      // paginationDefaultPage={currentPage}
-      // paginationComponent={CustomPagination}
-      data={props.data}
-      paginationServer={
-        props.pagination && props.handlerPageChange ? true : false
-      }
-      onSelectedRowsChange={
-        props.onSelectedRowsChange ? props.onSelectedRowsChange : null
-      }
-      selectableRows={props.selectableRows}
-      onChangePage={props.pagination ? props.handlerPageChange : null}
-      paginationComponentOptions={{
-        noRowsPerPage: props.handlerPageChange ? true : false
-      }}
-      progressPending={props.handlerPageChange ? loading : false}
-      progressComponent={
-        <div
-          style={{
-            width: '100%',
-            height: '504px',
-            backgroundColor: 'rgba(35, 41, 58, 0.7)'
-          }}
-        >
-          <div className='grid-loading'>
-            <div>
-              <Spinner color='primary' />
-              <span>Loading...</span>
-            </div>
-          </div>
-        </div>
-      }
-    />
+    <>
+      <DataTable
+        noHeader
+        pagination={props.pagination}
+        paginationTotalRows={props.total}
+        // paginationServer
+        subHeader={false}
+        columns={props.columns}
+        responsive={true}
+        sortIcon={<ChevronDown />}
+        className='react-dataTable pal-dateTable'
+        // defaultSortField='invoiceId'
+        // paginationDefaultPage={currentPage}
+        // paginationComponent={CustomPagination}
+        data={props.data}
+        paginationServer={
+          props.pagination && props.handlerPageChange ? true : false
+        }
+        onSelectedRowsChange={
+          props.onSelectedRowsChange ? props.onSelectedRowsChange : null
+        }
+        selectableRows={props.selectableRows}
+        onChangePage={props.pagination ? props.handlerPageChange : null}
+        paginationComponentOptions={{
+          noRowsPerPage: props.handlerPageChange ? true : false
+        }}
+      />
+    </>
   );
 };