cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-17 19:37:02 +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>
</>
);

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

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

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

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