add loading state

src/components/Consents/Consents.tsx

@@ -15,6 +15,7 @@ import { IGrdfConsent, grdfColumnDef } from '../../models/grdfConsent'
 import { ISgeConsent, sgeColumnDefs } from '../../models/sgeConsent.model'
 import { GrdfConsentService } from '../../services/grdfConsent.service'
 import { SgeConsentService } from '../../services/sgeConsent.service'
+import Loader from '../Loader/Loader'
 import DownloadModal from './DownloadModal'
 import './agGridOverrides.scss'
 import styles from './consents.module.scss'
@@ -23,6 +24,7 @@ export const Consents: React.FC<{ type: 'sge' | 'grdf' }> = ({ type }) => {
   const isGRDF = type === 'grdf'
 
   const [gridApi, setGridApi] = useState<GridApi | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
   const [search, setSearch] = useState<string>('')
   const [selectedNodes, setSelectedNodes] = useState<IRowNode[]>([])
   const [isShowingSelection, setIsShowingSelection] = useState<boolean>(false)
@@ -75,13 +77,14 @@ export const Consents: React.FC<{ type: 'sge' | 'grdf' }> = ({ type }) => {
         .filter(node => node.isSelected)
         .map(node => node.data.ID)
 
-      newNodes.forEach(node => {
+      newNodes?.forEach(node => {
         if (idsToCheck.includes(node.data.ID)) node.setSelected(true, false)
       })
     }
   }, [gridApi, selectedNodes])
 
   const searchConsents = async () => {
+    setIsLoading(true)
     if (user) {
       const consentPagination = await consentService.searchConsents(
         search,
@@ -95,6 +98,7 @@ export const Consents: React.FC<{ type: 'sge' | 'grdf' }> = ({ type }) => {
         setTotalRows(consentPagination.totalRows)
       }
     }
+    setIsLoading(false)
   }
 
   const handleSearchChange = (newSearch: string) => {
@@ -208,24 +212,27 @@ export const Consents: React.FC<{ type: 'sge' | 'grdf' }> = ({ type }) => {
           className="ag-theme-alpine-dark"
           style={{ width: '100%', height: '75vh' }}
         >
-          <AgGridReact
-            onGridReady={onGridReady}
-            defaultColDef={defaultColDef}
-            rowHeight={35}
-            rowData={consents}
-            columnDefs={columnDefs}
-            animateRows={true}
-            rowSelection="multiple"
-            allowDragFromColumnsToolPanel={false}
-            onRowSelected={onRowSelected}
-            sortingOrder={['asc', 'desc']}
-            rowMultiSelectWithClick={true}
-            pagination={false}
-            suppressCellFocus={true}
-            rowClassRules={{
-              expired: params => params.data.endDate < DateTime.now(),
-            }}
-          />
+          {isLoading && <Loader />}
+          {!isLoading && (
+            <AgGridReact
+              onGridReady={onGridReady}
+              defaultColDef={defaultColDef}
+              rowHeight={35}
+              rowData={consents}
+              columnDefs={columnDefs}
+              animateRows={true}
+              rowSelection="multiple"
+              allowDragFromColumnsToolPanel={false}
+              onRowSelected={onRowSelected}
+              sortingOrder={['asc', 'desc']}
+              rowMultiSelectWithClick={true}
+              pagination={false}
+              suppressCellFocus={true}
+              rowClassRules={{
+                expired: params => params.data.endDate < DateTime.now(),
+              }}
+            />
+          )}
           {!isShowingSelection && (
             <TablePagination
               labelRowsPerPage="Consentements par page"