improvement: better on table row skeleton styles

frontend/src/components/ContactDrawer/index.js

@@ -11,7 +11,6 @@ import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
 import Paper from "@material-ui/core/Paper";
 
-
 import { i18n } from "../../translate/i18n";
 import LinkifyWithTargetBlank from "../LinkifyWithTargetBlank";
 import ContactModal from "../ContactModal";
@@ -19,8 +18,6 @@ import ContactDrawerSkeleton from "../ContactDrawerSkeleton";
 
 const drawerWidth = 320;
 
-
-
 const useStyles = makeStyles(theme => ({
 	drawer: {
 		width: drawerWidth,
@@ -151,7 +148,6 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 								variant="outlined"
 								className={classes.contactExtraInfo}
 							>
-
 								<InputLabel>{info.name}</InputLabel>
 								<LinkifyWithTargetBlank>
 									<Typography noWrap style={{ paddingTop: 2 }}>

frontend/src/components/TableRowSkeleton/index.js

@@ -2,8 +2,18 @@ import React from "react";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 import Skeleton from "@material-ui/lab/Skeleton";
+import { makeStyles } from "@material-ui/core";
+
+const useStyles = makeStyles(theme => ({
+	customTableCell: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+	},
+}));
 
 const TableRowSkeleton = () => {
+	const classes = useStyles();
 	return (
 		<>
 			<TableRow>
@@ -13,13 +23,21 @@ const TableRowSkeleton = () => {
 				<TableCell>
 					<Skeleton animation="wave" height={20} width={80} />
 				</TableCell>
-				<TableCell>
+				<TableCell align="center">
-					<Skeleton animation="wave" height={20} width={80} />
+					<div className={classes.customTableCell}>
+						<Skeleton align="center" animation="wave" height={20} width={80} />
+					</div>
 				</TableCell>
-				<TableCell>
+				<TableCell align="center">
-					<Skeleton animation="wave" height={20} width={80} />
+					<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></TableCell>
 			</TableRow>
 		</>
 	);

frontend/src/pages/Users/index.js

@@ -28,6 +28,7 @@ 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";
 
 const reducer = (state, action) => {
 	if (action.type === "LOAD_USERS") {
@@ -110,7 +111,7 @@ const Users = () => {
 					});
 					dispatch({ type: "LOAD_USERS", payload: data.users });
 					setHasMore(data.hasMore);
-					setLoading(false);
+					// setLoading(false);
 				} catch (err) {
 					const errorMsg = err.response?.data?.error;
 					if (errorMsg) {
@@ -252,10 +253,15 @@ const Users = () => {
 				<Table size="small">
 					<TableHead>
 						<TableRow>
+							<TableCell padding="checkbox" />
 							<TableCell>{i18n.t("users.table.name")}</TableCell>
-							<TableCell>{i18n.t("users.table.email")}</TableCell>
+							<TableCell align="center">
-							<TableCell>{i18n.t("users.table.profile")}</TableCell>
+								{i18n.t("users.table.email")}
-							<TableCell align="right">
+							</TableCell>
+							<TableCell align="center">
+								{i18n.t("users.table.profile")}
+							</TableCell>
+							<TableCell align="center">
 								{i18n.t("users.table.actions")}
 							</TableCell>
 						</TableRow>
@@ -264,10 +270,13 @@ const Users = () => {
 						<>
 							{users.map(user => (
 								<TableRow key={user.id}>
+									<TableCell style={{ paddingRight: 0 }}>
+										{<Avatar />}
+									</TableCell>
 									<TableCell>{user.name}</TableCell>
-									<TableCell>{user.email}</TableCell>
+									<TableCell align="center">{user.email}</TableCell>
-									<TableCell>{user.profile}</TableCell>
+									<TableCell align="center">{user.profile}</TableCell>
-									<TableCell align="right">
+									<TableCell align="center">
 										<IconButton
 											size="small"
 											onClick={() => handleEditUser(user)}