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}
/>
)}