cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-20 04:39:20 +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(); const classes = useStyles();
return ( return (
<> <>
<TableRow> <TableRow>
<TableCell style={{ paddingRight: 0 }}> {avatar && (
<Skeleton animation="wave" variant="circle" width={40} height={40} /> <>
</TableCell> <TableCell style={{ paddingRight: 0 }}>
<TableCell> <Skeleton
<Skeleton animation="wave" height={20} width={80} /> animation="wave"
</TableCell> variant="circle"
<TableCell align="center"> width={40}
<div className={classes.customTableCell}> height={40}
<Skeleton align="center" animation="wave" height={20} width={80} /> />
</div> </TableCell>
</TableCell> <TableCell>
<TableCell align="center"> <Skeleton animation="wave" height={30} width={80} />
<div className={classes.customTableCell}> </TableCell>
<Skeleton align="center" animation="wave" height={20} width={80} /> </>
</div> )}
</TableCell> {Array.from({ length: columns }, (_, index) => (
<TableCell align="center"> <TableCell align="center" key={index}>
<div className={classes.customTableCell}> <div className={classes.customTableCell}>
<Skeleton align="center" animation="wave" height={20} width={80} /> <Skeleton
</div> align="center"
</TableCell> animation="wave"
height={30}
width={80}
/>
</div>
</TableCell>
))}
</TableRow> </TableRow>
</> </>
); );

2
frontend/src/pages/Contacts/index.js
View File

@@ -337,7 +337,7 @@ const Contacts = () => {
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
{loading && <TableRowSkeleton />} {loading && <TableRowSkeleton avatar columns={3} />}
</> </>
</TableBody> </TableBody>
</Table> </Table>

2
frontend/src/pages/Queues/index.js
View File

@@ -256,7 +256,7 @@ const Queues = () => {
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
{loading && <TableRowSkeleton />} {loading && <TableRowSkeleton columns={4} />}
</> </>
</TableBody> </TableBody>
</Table> </Table>

11
frontend/src/pages/Users/index.js
View File

@@ -28,7 +28,6 @@ import { i18n } from "../../translate/i18n";
import TableRowSkeleton from "../../components/TableRowSkeleton"; import TableRowSkeleton from "../../components/TableRowSkeleton";
import UserModal from "../../components/UserModal"; import UserModal from "../../components/UserModal";
import ConfirmationModal from "../../components/ConfirmationModal"; import ConfirmationModal from "../../components/ConfirmationModal";
import { Avatar } from "@material-ui/core";
import toastError from "../../errors/toastError"; import toastError from "../../errors/toastError";
const reducer = (state, action) => { const reducer = (state, action) => {
@@ -237,8 +236,7 @@ const Users = () => {
<Table size="small"> <Table size="small">
<TableHead> <TableHead>
<TableRow> <TableRow>
<TableCell padding="checkbox" /> <TableCell align="center">{i18n.t("users.table.name")}</TableCell>
<TableCell>{i18n.t("users.table.name")}</TableCell>
<TableCell align="center"> <TableCell align="center">
{i18n.t("users.table.email")} {i18n.t("users.table.email")}
</TableCell> </TableCell>
@@ -254,10 +252,7 @@ const Users = () => {
<> <>
{users.map(user => ( {users.map(user => (
<TableRow key={user.id}> <TableRow key={user.id}>
<TableCell style={{ paddingRight: 0 }}> <TableCell align="center">{user.name}</TableCell>
{<Avatar />}
</TableCell>
<TableCell>{user.name}</TableCell>
<TableCell align="center">{user.email}</TableCell> <TableCell align="center">{user.email}</TableCell>
<TableCell align="center">{user.profile}</TableCell> <TableCell align="center">{user.profile}</TableCell>
<TableCell align="center"> <TableCell align="center">
@@ -280,7 +275,7 @@ const Users = () => {
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
{loading && <TableRowSkeleton />} {loading && <TableRowSkeleton columns={4} />}
</> </>
</TableBody> </TableBody>
</Table> </Table>