diff --git a/CHANGELOG.md b/CHANGELOG.md index 8a1e28375..5e45605b9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Table Widget: Add a skeleton for loading state [#689](https://github.com/CartoDB/carto-react/pull/689) - TimeSeries Widget: Add a skeleton for loading state [#686](https://github.com/CartoDB/carto-react/pull/686) - Pie & ComparativePie Widgets: Add a skeleton for loading state [#682](https://github.com/CartoDB/carto-react/pull/682) - Range Widget: Add a skeleton for loading state [#681](https://github.com/CartoDB/carto-react/pull/681) diff --git a/packages/react-ui/src/widgets/TableWidgetUI/Skeleton/TableSkeleton.js b/packages/react-ui/src/widgets/TableWidgetUI/Skeleton/TableSkeleton.js new file mode 100644 index 000000000..7ea4aefa6 --- /dev/null +++ b/packages/react-ui/src/widgets/TableWidgetUI/Skeleton/TableSkeleton.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + styled +} from '@mui/material'; +import TableSkeletonRow from './TableSkeletonRow'; + +const StyledTableContainer = styled(TableContainer)(({ theme }) => ({ + overflow: 'hidden' +})); + +const TableSkeleton = ({ style }) => { + return ( + + + + + + + + + + {[...Array(10)].map((_, i) => ( + + + + + ))} + +
+
+ ); +}; + +export default TableSkeleton; diff --git a/packages/react-ui/src/widgets/TableWidgetUI/Skeleton/TableSkeletonRow.js b/packages/react-ui/src/widgets/TableWidgetUI/Skeleton/TableSkeletonRow.js new file mode 100644 index 000000000..4ce1569d4 --- /dev/null +++ b/packages/react-ui/src/widgets/TableWidgetUI/Skeleton/TableSkeletonRow.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { Skeleton, TableCell } from '@mui/material'; + +const TableSkeletonRow = ({ width, rows = 4, index }) => { + function getSkeletonWidth(index) { + const sizes = [72, 48, 96, 32, 64]; + let chosenIndex = index % sizes.length; + + return sizes[chosenIndex]; + } + + return [...Array(rows)].map((_, i) => ( + + + + )); +}; + +export default TableSkeletonRow; diff --git a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js index dc8fe2d12..e77df03dd 100644 --- a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js +++ b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js @@ -11,6 +11,7 @@ import { TablePagination, styled } from '@mui/material'; +import TableSkeleton from './Skeleton/TableSkeleton'; const TableHeadCellLabel = styled(TableSortLabel)(({ theme }) => ({ ...theme.typography.caption, @@ -53,7 +54,8 @@ function TableWidgetUI({ onSetRowsPerPage, onRowClick, height, - dense + dense, + isLoading }) { const paginationRef = useRef(null); @@ -78,6 +80,8 @@ function TableWidgetUI({ fixedHeightStyle.height = `calc(${height} - ${paginationHeight}px)`; } + if (isLoading) return ; + return ( <> @@ -189,7 +193,8 @@ TableWidgetUI.propTypes = { onSetRowsPerPage: PropTypes.func, onRowClick: PropTypes.func, height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - dense: PropTypes.bool + dense: PropTypes.bool, + isLoading: PropTypes.bool }; export default TableWidgetUI; diff --git a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js index 521ad734a..6097959f9 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js @@ -1,9 +1,10 @@ import React from 'react'; import TableWidgetUI from '../../../src/widgets/TableWidgetUI/TableWidgetUI'; -import { Box } from '@mui/material'; +import { Box, useTheme } from '@mui/material'; import LocationOnIcon from '@mui/icons-material/LocationOn'; import { columns, rows } from '../../../src/widgets/TableWidgetUI/mockData'; import Typography from '../../../src/components/atoms/Typography'; +import { Label, ThinContainer } from '../../utils/storyStyles'; const options = { title: 'Organisms/Widgets/TableWidgetUI', @@ -23,6 +24,31 @@ const Template = (args) => { return ; }; +const LoadingTemplate = (args) => { + const theme = useTheme(); + + return ( + <> + + + + + + + + + + + + ); +}; + const DefaultProps = { columns, rows }; export const Playground = Template.bind({}); @@ -78,3 +104,6 @@ CustomComponent.args = { }), rows: rows.slice(0, 5) }; + +export const Loading = LoadingTemplate.bind({}); +Loading.args = { ...DefaultProps, isLoading: true }; diff --git a/packages/react-widgets/src/widgets/TableWidget.js b/packages/react-widgets/src/widgets/TableWidget.js index d6e1ccb3f..1f39fb702 100644 --- a/packages/react-widgets/src/widgets/TableWidget.js +++ b/packages/react-widgets/src/widgets/TableWidget.js @@ -114,6 +114,7 @@ function TableWidget({ onSetSortDirection={setSortDirection} height={height} dense={dense} + isLoading={isLoading} /> )}