refactor: teeam member skeleton

ever-co · Jan 2, 2024 · 244d953 · 244d953
1 parent df3d91e
commit 244d953
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 10 deletions.
diff --git a/apps/web/components/shared/skeleton/UserTeamCardSkeleton.tsx b/apps/web/components/shared/skeleton/UserTeamCardSkeleton.tsx
@@ -1,6 +1,7 @@
+import { clsxm } from '@app/utils';
 import { Card, VerticalSeparator } from 'lib/components';
 import { DraggerIcon } from 'lib/components/svgs';
-import Skeleton from 'react-loading-skeleton';
+// import Skeleton from 'react-loading-skeleton';
 
 const UserTeamCardSkeletonCard = () => {
 	return (
@@ -11,16 +12,16 @@ const UserTeamCardSkeletonCard = () => {
 			<div className="w-[330px] px-4 flex space-x-3 items-center">
 				<div className="w-8 h-8 bg-[#F0F0F0] dark:bg-[#353741] rounded-full" />
 				<div className="w-10 h-10 bg-[#F0F0F0] dark:bg-[#353741] rounded-full" />
-				<Skeleton height={20} width={180} borderRadius={10} className="dark:bg-[#353741]" />
+				<Skeleton height={20} width={160} borderRadius={10} className="dark:bg-[#353741]" />
 			</div>
 			<VerticalSeparator />
 
-			<div className="w-[330px] px-4 flex flex-col items-center">
-				<div className="flex flex-col items-start">
-					<Skeleton height={10} width={280} borderRadius={10} className="dark:bg-[#353741] ml-2" />
+			<div className="w-[330px] px-4 flex flex-col items-center gap-2">
+				<div className="flex flex-col items-start gap-2">
+					<Skeleton height={10} width={160} borderRadius={10} className="dark:bg-[#353741] ml-2" />
 					<Skeleton height={10} width={120} borderRadius={10} className="dark:bg-[#353741] ml-2" />
 				</div>
-				<div className="flex justify-around items-center">
+				<div className="flex justify-around items-center gap-2">
 					<Skeleton height={15} width={80} borderRadius={10} className="dark:bg-[#353741] mr-2" />
 					<Skeleton height={15} width={80} borderRadius={10} className="dark:bg-[#353741] mr-2" />
 					<Skeleton height={15} width={80} borderRadius={10} className="dark:bg-[#353741]" />
@@ -48,4 +49,28 @@ const UserTeamCardSkeletonCard = () => {
 	);
 };
 
+const Skeleton = ({
+	height,
+	width,
+	borderRadius,
+	className
+}: {
+	height: number;
+	width: number;
+	borderRadius: number;
+	className: string;
+}) => {
+	console.log({ borderRadius });
+	return (
+		<div
+			className={clsxm(
+				'p-1  animate-pulse rounded-lg bg-[#F0F0F0] dark:bg-[#353741]',
+				height ? `h-[${height}px]` : 'h-[20px]',
+				width ? `w-[${width}px]` : 'w-[160px]',
+				className
+			)}
+		></div>
+	);
+};
+
 export default UserTeamCardSkeletonCard;
diff --git a/apps/web/lib/features/team-members-card-view.tsx b/apps/web/lib/features/team-members-card-view.tsx
@@ -41,7 +41,7 @@ const TeamMembersCardView: React.FC<Props> = ({
 		handleChangeOrder(peopleClone[draggedOverTeamMember.current], dragTeamMember.current);
 	}
 
-	const handleChangeOrder = (employee: OT_Member, order: number) => {		
+	const handleChangeOrder = (employee: OT_Member, order: number) => {
 		updateOrganizationTeamEmployeeOrderOnList(employee, order);
 	};
 
@@ -122,7 +122,7 @@ const TeamMembersCardView: React.FC<Props> = ({
 				leaveFrom="opacity-100"
 				leaveTo="opacity-0"
 			>
-				{[1, 2].map((_, i) => {
+				{[0, 2].map((_, i) => {
 					return (
 						<li key={i} className="mt-3">
 							<UserTeamCardSkeleton />

diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
@@ -295,7 +295,7 @@ html.dark {
 	}
 }
 
-@keyframes pulse {
+/* @keyframes pulse {
 	0%,
 	100% {
 		opacity: 1;
@@ -304,7 +304,7 @@ html.dark {
 		opacity: 1;
 		transform: scale(1.2);
 	}
-}
+} */
 
 .progress-ring__circle {
 	stroke-dasharray: 400, 400;