Skeleton loading on chat and messages

frontend/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.9.14",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

frontend/src/pages/Chat/components/MessagesList/MessagesList.js

@@ -18,6 +18,7 @@ import Avatar from "@material-ui/core/Avatar";
 import Button from "@material-ui/core/Button";
 import Paper from "@material-ui/core/Paper";
 import { green } from "@material-ui/core/colors";
+import Skeleton from "@material-ui/lab/Skeleton";
 
 import whatsBackground from "../../../../Images/wa-background.png";
 
@@ -257,10 +258,10 @@ const MessagesList = () => {
 		};
 	}, [ticketId]);
 
-	const handleSearch = e => {
+	// const handleSearch = e => {
-		setSearchParam(e.target.value);
+	// 	setSearchParam(e.target.value);
-		setPageNumber(1);
+	// 	setPageNumber(1);
-	};
+	// };
 
 	const loadMore = () => {
 		setPageNumber(prevPageNumber => prevPageNumber + 1);
@@ -441,53 +442,64 @@ const MessagesList = () => {
 	return (
 		<Paper variant="outlined" elevation={0} className={classes.mainWrapper}>
 			<Card square className={classes.messagesHeader}>
-				{contact.name ? (
+				<CardHeader
-					<CardHeader
+					titleTypographyProps={{ noWrap: true }}
-						titleTypographyProps={{ noWrap: true }}
+					subheaderTypographyProps={{ noWrap: true }}
-						subheaderTypographyProps={{ noWrap: true }}
+					avatar={
-						avatar={<Avatar alt="contact_image" src={contact.profilePicUrl} />}
+						loading ? (
-						title={`${contact.name} #${ticket.id}`}
+							<Skeleton animation="wave" variant="circle">
-						subheader={`Atribuído á ${ticket.userId}`}
+								<Avatar alt="contact_image" />
-					/>
+							</Skeleton>
-				) : (
+						) : (
-					<CardHeader
+							<Avatar src={contact.profilePicUrl} alt="contact_image" />
-						titleTypographyProps={{ noWrap: true }}
+						)
-						subheaderTypographyProps={{ noWrap: true }}
+					}
-						avatar={<Avatar alt="contact_image" />}
+					title={
-						title=""
+						loading ? (
-						subheader=""
+							<Skeleton animation="wave" width={60} />
-					/>
+						) : (
-				)}
+							`${contact.name} #${ticket.id}`
-
+						)
-				<div className={classes.actionButtons}>
+					}
-					{ticket.status === "closed" ? (
+					subheader={
-						<Button
+						loading ? (
-							startIcon={<ReplayIcon />}
+							<Skeleton animation="wave" width={80} />
-							size="small"
+						) : (
-							onClick={e => handleUpdateTicketStatus("open", userId)}
+							`Atribuído á ${ticket.userId}`
-						>
+						)
-							Reabrir
+					}
-						</Button>
+				/>
-					) : (
+				{!loading && (
-						<>
+					<div className={classes.actionButtons}>
+						{ticket.status === "closed" ? (
 							<Button
 								startIcon={<ReplayIcon />}
 								size="small"
-								onClick={e => handleUpdateTicketStatus("pending", null)}
+								onClick={e => handleUpdateTicketStatus("open", userId)}
 							>
-								Retornar
+								Reabrir
 							</Button>
-							<Button
+						) : (
-								size="small"
+							<>
-								variant="contained"
+								<Button
-								color="primary"
+									startIcon={<ReplayIcon />}
-								onClick={e => handleUpdateTicketStatus("closed", userId)}
+									size="small"
-							>
+									onClick={e => handleUpdateTicketStatus("pending", null)}
-								Resolver
+								>
-							</Button>
+									Retornar
-						</>
+								</Button>
-					)}
+								<Button
-				</div>
+									size="small"
+									variant="contained"
+									color="primary"
+									onClick={e => handleUpdateTicketStatus("closed", userId)}
+								>
+									Resolver
+								</Button>
+							</>
+						)}
+					</div>
+				)}
 			</Card>
 			<div className={classes.messagesListWrapper}>
 				<InfiniteScrollReverse

frontend/src/pages/Chat/components/TicketsList/TicketSkeleton.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import ListItemAvatar from "@material-ui/core/ListItemAvatar";
+import Divider from "@material-ui/core/Divider";
+import Skeleton from "@material-ui/lab/Skeleton";
+
+const TicketSkeleton = () => {
+	return (
+		<>
+			<ListItem dense>
+				<ListItemAvatar>
+					<Skeleton animation="wave" variant="circle" width={40} height={40} />
+				</ListItemAvatar>
+				<ListItemText
+					primary={<Skeleton animation="wave" height={20} width={60} />}
+					secondary={<Skeleton animation="wave" height={20} width={90} />}
+				/>
+			</ListItem>
+			<Divider />
+		</>
+	);
+};
+
+export default TicketSkeleton;

frontend/src/pages/Chat/components/TicketsList/TicketsList.js

@@ -31,8 +31,11 @@ import Tab from "@material-ui/core/Tab";
 import MoveToInboxIcon from "@material-ui/icons/MoveToInbox";
 import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
 
+import TicketSkeleton from "./TicketSkeleton";
+
 const useStyles = makeStyles(theme => ({
 	contactsWrapper: {
+		position: "relative",
 		display: "flex",
 		height: "100%",
 		flexDirection: "column",
@@ -41,8 +44,8 @@ const useStyles = makeStyles(theme => ({
 		borderBottomRightRadius: 0,
 	},
 
-	contactsHeader: {
+	tabsHeader: {
-		display: "flex",
+		// display: "flex",
 		backgroundColor: "#eee",
 	},
 
@@ -53,7 +56,6 @@ const useStyles = makeStyles(theme => ({
 	},
 
 	openTicketsList: {
-		position: "relative",
 		height: "50%",
 		overflowY: "scroll",
 		"&::-webkit-scrollbar": {
@@ -63,11 +65,10 @@ const useStyles = makeStyles(theme => ({
 			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
 			backgroundColor: "#e8e8e8",
 		},
-		borderTop: "2px solid rgba(0, 0, 0, 0.12)",
+		borderTop: "1px solid rgba(0, 0, 0, 0.12)",
 	},
 
 	closedTicketsList: {
-		position: "relative",
 		flex: 1,
 		overflowY: "scroll",
 		"&::-webkit-scrollbar": {
@@ -166,19 +167,11 @@ const useStyles = makeStyles(theme => ({
 		color: green[500],
 		opacity: "70%",
 		position: "absolute",
-		top: 0,
+		top: "50%",
 		left: "50%",
 		marginTop: 12,
 		// marginLeft: -12,
 	},
-	fabButton: {
-		position: "absolute",
-		zIndex: 1,
-		bottom: 20,
-		left: 0,
-		right: 0,
-		margin: "0 auto",
-	},
 }));
 
 const TicketsList = () => {
@@ -429,12 +422,25 @@ const TicketsList = () => {
 				)
 		);
 
-		return viewTickets;
+		if (loading) {
+			return <>{Array(2).fill(<TicketSkeleton />)}</>;
+		} else if (viewTickets.length === 0) {
+			return (
+				<div>
+					<span className={classes.noTicketsTitle}>All caught up</span>
+					<p className={classes.noTicketsText}>
+						No tickets to look into for now. Take a breather!
+					</p>
+				</div>
+			);
+		} else {
+			return viewTickets;
+		}
 	};
 
 	return (
 		<Paper elevation={0} variant="outlined" className={classes.contactsWrapper}>
-			<Paper elevation={0}>
+			<Paper elevation={0} square className={classes.tabsHeader}>
 				<Tabs
 					value={tab}
 					onChange={handleChangeTab}
@@ -465,11 +471,6 @@ const TicketsList = () => {
 						onChange={handleSearchContact}
 					/>
 				</div>
-				{loading ? (
-					<div>
-						<CircularProgress className={classes.circleLoading} />
-					</div>
-				) : null}
 			</Paper>
 			{tab === "open" ? (
 				<>
@@ -501,7 +502,6 @@ const TicketsList = () => {
 					<List>{renderTickets("closed")}</List>
 				</Paper>
 			)}
-
 			<audio id="sound" preload="auto">
 				<source src={require("../../../../util/sound.mp3")} type="audio/mpeg" />
 				<source src={require("../../../../util/sound.ogg")} type="audio/ogg" />

frontend/src/pages/WhatsAuth/WhatsAuth.js

@@ -5,7 +5,6 @@ import openSocket from "socket.io-client";
 
 import { makeStyles } from "@material-ui/core/styles";
 
-import Container from "@material-ui/core/Container";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 import Bateryinfo from "./components/Bateryinfo";

frontend/yarn.lock

@@ -1347,6 +1347,17 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
+"@material-ui/lab@^4.0.0-alpha.56":
+  version "4.0.0-alpha.56"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz#ff63080949b55b40625e056bbda05e130d216d34"
+  integrity sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.10.2"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0"
+
 "@material-ui/styles@^4.10.0":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"