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>
-					<Skeleton animation="wave" height={20} width={80} />
+				<TableCell align="center">
+					<div className={classes.customTableCell}>
+						<Skeleton align="center" animation="wave" height={20} width={80} />
+					</div>
 				</TableCell>
-				<TableCell>
-					<Skeleton animation="wave" height={20} width={80} />
+				<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></TableCell>
 			</TableRow>
 		</>
 	);