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
index 93bfbc77608..dea210225f9 100644
--- 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 ;
+ return ;
}
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
new file mode 100644
index 00000000000..381730b9f6a
--- /dev/null
+++ 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 (
+
+
+
+
+ {[...Array(5).keys()].map((value) => (
+
+
+
+ ))}
+
+
+
+ {[...Array(6).keys()].map((row) => (
+
+ {[...Array(5).keys()].map((value) => (
+
+
+
+ ))}
+
+ ))}
+
+
+
+ );
+}
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
index 4b32fdace4b..105e6ec6916 100644
--- 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
index 4c2bdc2c37c..cbb3b3ff8e7 100644
--- 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 ;
+ return ;
}
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
new file mode 100644
index 00000000000..8be1b61a9bc
--- /dev/null
+++ 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 (
+
+
+ {sizes.map((size, index) => (
+
+
+
+
+ ))}
+
+
+ );
+}
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
index 2f31af1a7e6..504abcf0c92 100644
--- 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
index 505004d4227..d7497d85e1d 100644
--- 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
index 793a7a42496..13f75c40bbc 100644
--- 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 {
);
}
-
-/**
- * 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
index e1f298fa548..a8988f4c5f9 100644
--- 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(tableOptions: MRTTableOptions): JSX.Element {
+export function MRTTable(tableOptions: MRTTableOptions): JSX.Element {
return ;
}