cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-18 03:39:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

improvement: better skeleton look on loading pages

Browse Source
This commit is contained in:
canove
2021-01-15 10:21:51 -03:00
parent 34e078d596
commit e6e9ac213f
4 changed files with 33 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/components/TableRowSkeleton/index.js
View File

@@ -12,32 +12,38 @@ const useStyles = makeStyles(theme => ({
},
}));
const TableRowSkeleton = () => {
const TableRowSkeleton = ({ avatar, columns }) => {
const classes = useStyles();
return (
<>
<TableRow>
<TableCell style={{ paddingRight: 0 }}>
<Skeleton animation="wave" variant="circle" width={40} height={40} />
</TableCell>
<TableCell>
<Skeleton animation="wave" height={20} width={80} />
</TableCell>
<TableCell align="center">
<div className={classes.customTableCell}>
<Skeleton align="center" animation="wave" height={20} width={80} />
</div>
</TableCell>
<TableCell align="center">
<div className={classes.customTableCell}>
<Skeleton align="center" animation="wave" height={20} width={80} />
</div>
</TableCell>
<TableCell align="center">
<div className={classes.customTableCell}>
<Skeleton align="center" animation="wave" height={20} width={80} />
</div>
</TableCell>
{avatar && (
<>
<TableCell style={{ paddingRight: 0 }}>
<Skeleton
animation="wave"
variant="circle"
width={40}
height={40}
/>
</TableCell>
<TableCell>
<Skeleton animation="wave" height={30} width={80} />
</TableCell>
</>
)}
{Array.from({ length: columns }, (_, index) => (
<TableCell align="center" key={index}>
<div className={classes.customTableCell}>
<Skeleton
align="center"
animation="wave"
height={30}
width={80}
/>
</div>
</TableCell>
))}
</TableRow>
</>
);