style 💎 add contact card skeleton

ngure1 · Jul 21, 2024 · 465ad6f · 465ad6f
1 parent 6dfb0b9
commit 465ad6f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/frontend/src/components/Cards/ContactCard.tsx b/frontend/src/components/Cards/ContactCard.tsx
@@ -4,6 +4,7 @@ import {
 	CardBody,
 	CardFooter,
 	IconButton,
+	Skeleton,
 } from "@chakra-ui/react";
 import { IoCallOutline } from "react-icons/io5";
 import { TbMessage } from "react-icons/tb";
@@ -18,13 +19,11 @@ const ContactCard = ({
 		<Card
 			display="flex"
 			flexDirection="row"
-            size="sm"
+			size="sm"
 			className="sm:max-w-[25rem]"
 		>
 			<CardBody className="flex gap-4 items-center">
-				<Avatar
-					name={firstName}
-				/>
+				<Avatar name={firstName} />
 				<div className="text-left">
 					<p className="text-lg">
 						{firstName} {lastName}
@@ -49,4 +48,12 @@ const ContactCard = ({
 	);
 };
 
+export const ContactCardSkeleton = () => {
+	return (
+	<Skeleton>
+		<ContactCard/>
+	</Skeleton>
+	);
+};
+
 export default ContactCard;
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -4,15 +4,18 @@ import { useState, useEffect } from "react";
 import type { Contact } from "../types";
 import { useToast } from "@chakra-ui/react";
 import MessageCard from "../components/Cards/MessageCard";
+import { Skeleton } from "@chakra-ui/react";
 
 const Home = () => {
 	const [contacts, setContacts] = useState<Contact[]>([]);
+	const [isLoading, setIsLoading] = useState(true);
 
 	const toast = useToast();
 	useEffect(() => {
 		axiosInstance
 			.get("/api/contacts/")
 			.then((res) => {
+				setIsLoading(false);
 				setContacts(res.data);
 			})
 			.catch((err) => {
@@ -22,20 +25,30 @@ const Home = () => {
 					status: "error",
 				});
 				console.log(err);
+				setIsLoading(false);
 			});
 	}, []);
 	return (
 		<div className="flex w-full justify-between py-5 pr-20">
 			<div className="flex flex-col gap-4">
-				{contacts &&
+				{isLoading ? (
+					<Skeleton
+					// isLoaded={isLoading}
+					// fadeDuration={3}
+					>
+						<ContactCard />
+					</Skeleton>
+				) : (
+					contacts &&
 					contacts.map((contact, index) => (
 						<ContactCard
 							key={index}
 							firstName={contact.firstName}
 							lastName={contact.lastName}
 							phoneNumber={contact.phoneNumber}
 						/>
-					))}
+					))
+				)}
 			</div>
 			<div className="w-[50%]">
 				<MessageCard />