Skip to content

Commit 18953b1

Browse files
elijahladdieelijahladdie
committed
adding ttl and trainee attendance loading
1 parent b2f4b62 commit 18953b1

13 files changed

+1080
-642
lines changed

‎src/Skeletons/Team.skeleton.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
3+
function TeamsSkeleton() {
4+
// Define unique identifiers for calendar days
5+
6+
return (
7+
<div className="animate-pulse font-serif font-lexend w-[550px] h-[300px] md:w-[550px] md:h-[300px] rounded-md px-3 md:p-10 mr-11 py-7 bg-gray-300">
8+
<div className="flex justify-between py-1">
9+
{/* Team Name Placeholder */}
10+
<div className="flex items-center">
11+
<div className="h-10 w-10 rounded-full bg-gray-400" />
12+
<div className="h-6 w-32 bg-gray-400 ml-3 rounded-md" />
13+
</div>
14+
{/* Grade Placeholder */}
15+
<div className="h-8 w-12 bg-gray-400 rounded-md" />
16+
</div>
17+
18+
<div className="font-josefin ml-12 mt-3 space-y-3">
19+
{/* Coordinator and TTL Placeholders */}
20+
<div>
21+
<div className="h-4 w-40 bg-gray-400 rounded-md" />
22+
<div className="h-4 w-32 bg-gray-400 rounded-md mt-1" />
23+
</div>
24+
<div>
25+
<div className="h-4 w-40 bg-gray-400 rounded-md" />
26+
<div className="h-4 w-32 bg-gray-400 rounded-md mt-1" />
27+
</div>
28+
29+
{/* Active and Drop Stats Placeholder */}
30+
<div className="flex items-center">
31+
<div className="h-5 w-5 bg-gray-400 rounded-full" />
32+
<div className="h-4 w-20 bg-gray-400 ml-2 rounded-md" />
33+
<span className="mx-2">|</span>
34+
<div className="h-4 w-20 bg-gray-400 rounded-md" />
35+
</div>
36+
37+
{/* Sprint and Phase Placeholder */}
38+
<div>
39+
<div className="h-4 w-64 bg-gray-400 rounded-md" />
40+
</div>
41+
42+
{/* Metrics Placeholders */}
43+
<div className="space-y-2 flex items-center gap-3">
44+
<div className="flex items-center space-x-3">
45+
<div className="h-5 w-5 bg-gray-400 rounded-full" />
46+
<div className="h-4 w-28 bg-gray-400 rounded-md" />
47+
</div>
48+
<div className="flex items-center space-x-3">
49+
<div className="h-5 w-5 bg-gray-400 rounded-full" />
50+
<div className="h-4 w-28 bg-gray-400 rounded-md" />
51+
</div>
52+
<div className="flex items-center space-x-3">
53+
<div className="h-5 w-5 bg-gray-400 rounded-full" />
54+
<div className="h-4 w-28 bg-gray-400 rounded-md" />
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
);
60+
}
61+
62+
export default TeamsSkeleton;

‎src/Skeletons/attendance.skeleton.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react';
2+
3+
function AttendanceSkeleton() {
4+
return (
5+
<div className="animate-pulse space-y-6">
6+
<div className="h-8 bg-gray-300 rounded w-1/4" />
7+
<div className="flex justify-between items-center">
8+
<div className="flex space-x-4">
9+
<div className="h-8 bg-gray-300 rounded w-32" />
10+
<div className="h-8 bg-gray-300 rounded w-20" />
11+
</div>
12+
<div className="h-8 bg-gray-300 rounded w-40" />
13+
</div>
14+
<div className="flex space-x-2">
15+
{Array(5)
16+
.fill(null)
17+
.map((_) => (
18+
<div
19+
id={`day-skeleton-${_}`}
20+
className="h-8 bg-gray-300 rounded w-16"
21+
/>
22+
))}
23+
</div>
24+
25+
<div className="border border-gray-300 rounded overflow-hidden">
26+
<div className="flex bg-gray-200">
27+
<div className="h-10 w-1/4 bg-gray-300" />
28+
<div className="h-10 w-1/4 bg-gray-300" />
29+
<div className="h-10 w-1/4 bg-gray-300" />
30+
<div className="h-10 w-1/4 bg-gray-300" />
31+
</div>
32+
33+
{Array(5)
34+
.fill(null)
35+
.map((_, rowIndex) => (
36+
<div id={`row-skeleton-${rowIndex}`} className="flex space-x-1">
37+
{Array(4)
38+
.fill(null)
39+
.map((_, colIndex) => (
40+
<div
41+
id={`cell-skeleton-${rowIndex}-${colIndex}`}
42+
className="h-8 bg-gray-300 w-1/4"
43+
/>
44+
))}
45+
</div>
46+
))}
47+
</div>
48+
49+
<div className="flex justify-between">
50+
<div className="space-y-2">
51+
<div className="h-4 bg-gray-300 w-32" />
52+
<div className="h-4 bg-gray-300 w-40" />
53+
<div className="h-4 bg-gray-300 w-24" />
54+
</div>
55+
<div className="space-y-2">
56+
<div className="h-6 bg-gray-300 rounded w-24" />
57+
<div className="h-6 bg-gray-300 rounded w-28" />
58+
<div className="h-6 bg-gray-300 rounded w-20" />
59+
</div>
60+
</div>
61+
</div>
62+
);
63+
}
64+
65+
export default AttendanceSkeleton;

‎src/components/CoordinatorCard.tsx

+13-10
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
77
import Card from './TeamCard';
88
import { UserContext } from '../hook/useAuth';
99
import Spinner from './Spinner';
10+
import TeamsSkeleton from '../Skeletons/Team.skeleton';
1011

1112
export const GET_TEAMS_CARDS = gql`
1213
query GetAllTeams($orgToken: String!) {
@@ -32,7 +33,7 @@ export const GET_TEAMS_CARDS = gql`
3233
lastName
3334
firstName
3435
}
35-
status{
36+
status {
3637
status
3738
}
3839
}
@@ -147,12 +148,12 @@ function ManagerCard() {
147148
rating = 'text-red-700';
148149
}
149150

150-
const activeMembers = team.members.filter(
151-
(member: any) => member.status?.status === 'active'
152-
).length;
153-
const droppedMembers = team.members.filter(
154-
(member: any) => member.status?.status === 'drop'
155-
).length;
151+
const activeMembers = team.members.filter(
152+
(member: any) => member.status?.status === 'active',
153+
).length;
154+
const droppedMembers = team.members.filter(
155+
(member: any) => member.status?.status === 'drop',
156+
).length;
156157

157158
return {
158159
stylebg,
@@ -180,11 +181,13 @@ function ManagerCard() {
180181
return (
181182
<div className="px-4 md:px-0 pb-20 w-full dark:bg-dark-frame-bg dark:text-black h-full flex overflow-x-auto ">
182183
{loading ? (
183-
<div className="flex items-center justify-center w-full h-full">
184-
<div className="spinner" data-testid="spinner" />
184+
<div className="flex md:flex-wrap " data-testid="spinner">
185+
<TeamsSkeleton />
186+
<TeamsSkeleton />
187+
<TeamsSkeleton />
185188
</div>
186189
) : (
187-
<div className="pl-10 flex">
190+
<div className=" flex">
188191
{teamData &&
189192
teamData.map((teamProps: any, index: number) => (
190193
<Link key={index} to={`/team/${teamProps.teamname}`}>

0 commit comments

Comments
 (0)