Table Widget: Add a skeleton for loading state (#689)

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)

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 (
+    <StyledTableContainer style={style}>
+      <Table aria-label='skeleton table'>
+        <TableHead>
+          <TableRow>
+            <TableCell />
+            <TableSkeletonRow width={56} />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {[...Array(10)].map((_, i) => (
+            <TableRow key={i}>
+              <TableSkeletonRow rows={1} width={8} />
+              <TableSkeletonRow index={i} />
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </StyledTableContainer>
+  );
+};
+
+export default TableSkeleton;

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) => (
+    <TableCell key={i}>
+      <Skeleton width={width || getSkeletonWidth(index)} height={8} />
+    </TableCell>
+  ));
+};
+
+export default TableSkeletonRow;

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 <TableSkeleton style={fixedHeightStyle} />;
+
   return (
     <>
       <TableContainer style={fixedHeightStyle}>
@@ -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;

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 <TableWidgetUI {...args} />;
 };
 
+const LoadingTemplate = (args) => {
+  const theme = useTheme();
+
+  return (
+    <>
+      <Label variant='body1' mb={3}>
+        {'Limited width'}
+      </Label>
+      <ThinContainer>
+        <TableWidgetUI {...args} />
+      </ThinContainer>
+
+      <Label variant='body1' mt={8} mb={3}>
+        {'Limited height'}
+      </Label>
+      <TableWidgetUI {...args} height={theme.spacing(36)} />
+
+      <Label variant='body1' mt={8} mb={3}>
+        {'Responsive'}
+      </Label>
+      <TableWidgetUI {...args} />
+    </>
+  );
+};
+
 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 };

packages/react-widgets/src/widgets/TableWidget.js

@@ -114,6 +114,7 @@ function TableWidget({
             onSetSortDirection={setSortDirection}
             height={height}
             dense={dense}
+            isLoading={isLoading}
           />
         )}
       </WidgetWithAlert>