fix(dataTable): fix the skeleton of datatable (#2332)

* fix(datable): update the datatbale and detail skeleton closes2307 * fix(datable): update the datatbale and detail skeleton closes2307 * fix(datable): update the datatbale and detail skeleton closes2307
Canadian-Geospatial-Platform · Jul 2, 2024 · 065961f · 065961f
1 parent 91f4ad2
commit 065961f
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 21 deletions.
diff --git a/packages/geoview-core/src/core/components/data-table/data-panel.tsx b/packages/geoview-core/src/core/components/data-table/data-panel.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
 import { delay } from 'lodash';
-import { Box, FilterAltIcon, Skeleton } from '@/ui';
+import { Box, FilterAltIcon } from '@/ui';
 import DataTable from './data-table';
 import {
   useDataTableSelectedLayerPath,
@@ -24,6 +24,7 @@ import { CONTAINER_TYPE, LAYER_STATUS, TABS } from '@/core/utils/constant';
 import { MappedLayerDataType } from './data-table-types';
 import { CV_DEFAULT_APPBAR_CORE } from '@/api/config/types/config-constants';
 import { TypeContainerBox } from '@/core/types/global-types';
+import DataSkeleton from './data-skeleton';
 
 interface DataPanelType {
   fullWidth?: boolean;
@@ -219,7 +220,7 @@ export function Datapanel({ fullWidth = false, containerType = CONTAINER_TYPE.FO
    */
   const renderContent = (): JSX.Element | null => {
     if (isLoading || memoIsLayerQueryStatusProcessing()) {
-      return <Skeleton variant="rounded" width="100%" height={400} sx={{ bgcolor: theme.palette.grey[400] }} />;
+      return <DataSkeleton />;
     }
     if (!isLayerDisabled() && isSelectedLayerHasFeatures()) {
       return (

diff --git a/packages/geoview-core/src/core/components/data-table/data-skeleton.tsx b/packages/geoview-core/src/core/components/data-table/data-skeleton.tsx
@@ -0,0 +1,37 @@
+import { useTheme } from '@mui/material/styles';
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Skeleton } from '@/ui';
+
+/**
+ * Custom data table skeleton build with table and mui skelton
+ * @returns {JSX.Element}
+ */
+export default function DataSkeleton(): JSX.Element {
+  const theme = useTheme();
+
+  return (
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            {[...Array(5).keys()].map((value) => (
+              <TableCell sx={{ width: '20%' }} key={value}>
+                <Skeleton variant="text" width="100%" height="25px" sx={{ bgcolor: theme.palette.grey[400] }} />
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {[...Array(6).keys()].map((row) => (
+            <TableRow key={row} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+              {[...Array(5).keys()].map((value) => (
+                <TableCell sx={{ width: '20%' }} key={value}>
+                  <Skeleton variant="text" width="100%" height="25px" sx={{ bgcolor: theme.palette.grey[400] }} />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx b/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx
@@ -7,7 +7,7 @@ import {
   DialogActions,
   DialogTitle,
   DialogContent,
-  Table,
+  MRTTable as Table,
   type MRT_ColumnDef as MRTColumnDef,
   Box,
   CircularProgress,

diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx
@@ -1,7 +1,7 @@
 import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
-import { IconButton, Grid, ArrowForwardIosOutlinedIcon, ArrowBackIosOutlinedIcon, LayersClearOutlinedIcon, Box, Skeleton } from '@/ui';
+import { IconButton, Grid, ArrowForwardIosOutlinedIcon, ArrowBackIosOutlinedIcon, LayersClearOutlinedIcon, Box } from '@/ui';
 import {
   useDetailsStoreActions,
   useDetailsCheckedFeatures,
@@ -16,6 +16,7 @@ import { LayerListEntry, Layout } from '@/core/components/common';
 import { getSxClasses } from './details-style';
 import { FeatureInfo } from './feature-info-new';
 import { LAYER_STATUS } from '@/core/utils/constant';
+import DetailsSkeleton from './details-skeleton';
 
 interface DetailsPanelType {
   fullWidth?: boolean;
@@ -430,7 +431,7 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme
    */
   const renderContent = (): JSX.Element | null => {
     if (memoIsAllLayersQueryStatusProcessing()) {
-      return <Skeleton variant="rounded" width="100%" height={500} sx={{ bgcolor: theme.palette.grey[400] }} />;
+      return <DetailsSkeleton />;
     }
     if (memoSelectedLayerDataFeatures && memoSelectedLayerDataFeatures.length > 0) {
       return (

diff --git a/packages/geoview-core/src/core/components/details/details-skeleton.tsx b/packages/geoview-core/src/core/components/details/details-skeleton.tsx
@@ -0,0 +1,21 @@
+import { Box, Skeleton } from '@/ui';
+
+/**
+ * Custom details skeleton build with mui skeleton component.
+ * @returns {JSX.Element}
+ */
+export default function DetailsSkeleton(): JSX.Element {
+  const sizes = ['15%', '10%', '15%', '25%', '10%', '20%', '10%'];
+  return (
+    <Box padding={8}>
+      <Box pb={8}>
+        {sizes.map((size, index) => (
+          <Box display="flex" justifyContent="space-between" pt={4} pb={4} key={`${index.toString()}-${size}}`}>
+            <Skeleton variant="text" width={size} height="25px" />
+            <Skeleton variant="text" width={size} height="25px" />
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}
diff --git a/packages/geoview-core/src/ui/button-drop-down/button-drop-down.tsx b/packages/geoview-core/src/ui/button-drop-down/button-drop-down.tsx
@@ -24,7 +24,7 @@ export type ButtonDropDownProps = ButtonGroupProps & {
 export function ButtonDropDown(props: ButtonDropDownProps): JSX.Element {
   // #region PROPS ****************************************************************************************************
 
-  const { options, onButtonClick, ...otherProps } = props;
+  const { options, onButtonClick = null, ...otherProps } = props;
 
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
@@ -126,8 +126,3 @@ export function ButtonDropDown(props: ButtonDropDownProps): JSX.Element {
 
   // #endregion
 }
-
-// TODO: Refactor - Remove defaultProps as it's no longer a good practice
-ButtonDropDown.defaultProps = {
-  onButtonClick: null,
-};
diff --git a/packages/geoview-core/src/ui/index.ts b/packages/geoview-core/src/ui/index.ts
@@ -47,3 +47,4 @@ export * from './toolbar/toolbar';
 export * from './tooltip/tooltip';
 export * from './typography/typography';
 export * from './popper/popper';
+export { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
diff --git a/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list.tsx b/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list.tsx
@@ -36,7 +36,7 @@ export type CheckboxListItem = {
  * @returns JSX.Element The Component
  */
 export function CheckboxList(props: CheckboxListProps): JSX.Element {
-  const { listItems, checkedValues, multiselect, onChecked } = props;
+  const { listItems, checkedValues, multiselect, onChecked = null } = props;
 
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
@@ -111,11 +111,3 @@ export function CheckboxList(props: CheckboxListProps): JSX.Element {
     </List>
   );
 }
-
-/**
- * React's default properties for the CheckboxList
- */
-// TODO: Refactor - Remove defaultProps as it's no longer a good practice
-CheckboxList.defaultProps = {
-  onChecked: null,
-};
diff --git a/packages/geoview-core/src/ui/table/table.tsx b/packages/geoview-core/src/ui/table/table.tsx
@@ -5,7 +5,7 @@ import { MaterialReactTable, MRT_TableOptions as MRTTableOptions, type MRT_RowDa
  * @param {MRTTableOptions} props props defined by material react table library.
  * @returns {JSX.Element}
  */
-export function Table<TData extends MRTRowData>(tableOptions: MRTTableOptions<TData>): JSX.Element {
+export function MRTTable<TData extends MRTRowData>(tableOptions: MRTTableOptions<TData>): JSX.Element {
   return <MaterialReactTable {...tableOptions} />;
 }