Skip to content

Commit 39154f6

Browse files
IsmaelmurekeziIsmaelmurekezi
authored
fix(#284):show skeleton whenever data is loading and labels to modal (#275)
1 parent dd1cbe1 commit 39154f6

File tree

8 files changed

+120
-42
lines changed

8 files changed

+120
-42
lines changed

‎src/components/Cohort/addCohortModal.tsx‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,10 @@ const AddCohortModal = ({ open, onClose }) => {
4949
};
5050

5151
return (
52-
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 dark:">
53-
<div className=" rounded-lg w-[30%] p-6 relative bg-white dark:bg-dark-frame-bg">
54-
<div className="flex justify-between items-center mb-6">
55-
<h2 className="text-black text-xl font-semibold dark:text-white">
52+
<div className=" fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 dark:">
53+
<div className="max-h-full text-sm rounded-lg w-[30%] p-6 relative bg-white dark:bg-dark-frame-bg md:h-[60%] ">
54+
<div className="flex justify-between items-center mb-3">
55+
<h2 className="text-black text-xl font-semibold dark:text-white">
5656
ADD NEW COHORT
5757
</h2>
5858
<button
@@ -63,11 +63,12 @@ const AddCohortModal = ({ open, onClose }) => {
6363
</button>
6464
</div>
6565

66-
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
66+
<form onSubmit={handleSubmit(onSubmit)} className="space-y-1">
67+
<label className="inline-block pt-2 pl-1">Name</label>
6768
<input
6869
type="text"
69-
placeholder="Name"
70-
className="w-full p-3 rounded bg-transparent border border-gray-600 placeholder:text-black focus:outline-none dark:placeholder:text-white"
70+
placeholder="Enter cohort name"
71+
className="w-full p-2 rounded bg-transparent border border-gray-600 placeholder:text-black focus:outline-none dark:placeholder:text-gray-400"
7172
{...register("title", {
7273
required: "Title is required",
7374
minLength: {
@@ -79,12 +80,16 @@ const AddCohortModal = ({ open, onClose }) => {
7980
{errors.title && (
8081
<p className="text-red-500">{errors.title?.message}</p>
8182
)}
83+
<label className="inline-block pt-2 pl-1">Application cycle</label>
8284

8385
<select
84-
className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
86+
className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
8587
{...register("cycle", { required: "Cycle is required" })}
8688
>
87-
<option value="" className="bg-gray-200 dark:bg-[#1e2124]">
89+
<option
90+
value=""
91+
className="text-gray-500 bg-gray-200 dark:bg-[#1e2124]"
92+
>
8893
Select Cycle
8994
</option>
9095
{cycleData.map((cycle) => (
@@ -100,12 +105,12 @@ const AddCohortModal = ({ open, onClose }) => {
100105
{errors.cycle && (
101106
<p className="text-red-500">{errors.cycle?.message}</p>
102107
)}
103-
108+
<label className="inline-block pt-2 pl-1">Program</label>
104109
<select
105-
className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
110+
className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
106111
{...register("program", { required: "Program is required" })}
107112
>
108-
<option value="" className="bg-gray-200 dark:bg-[#1e2124]">
113+
<option value="" className="bg-gray-500 dark:bg-[#1e2124]">
109114
Select Program
110115
</option>
111116
{programData.map((program) => (
@@ -121,12 +126,16 @@ const AddCohortModal = ({ open, onClose }) => {
121126
{errors.program && (
122127
<p className="text-red-500">{errors.program?.message}</p>
123128
)}
124-
129+
<label className="inline-block pt-2 pl-1">Phase</label>
125130
<select
126-
className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
131+
className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
127132
{...register("phase", { required: "Phase is required" })}
128133
>
129-
<option value="" className="bg-gray-200 dark:bg-[#1e2124]">
134+
<option
135+
value=""
136+
color={"red"}
137+
className="text-gray-500 dark:bg-[#1e2124]"
138+
>
130139
Phase
131140
</option>
132141
<option
@@ -140,25 +149,27 @@ const AddCohortModal = ({ open, onClose }) => {
140149
<p className="text-red-500">{errors.phase?.message}</p>
141150
)}
142151

152+
<label className="inline-block pt-2 pl-1">Starting Date</label>
143153
<input
144154
type="date"
145-
className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
155+
className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
146156
{...register("start", { required: "Starting date is required" })}
147157
/>
148158
{errors.start && (
149159
<p className="text-red-500">{errors.start?.message}</p>
150160
)}
151161

162+
<label className="inline-block pt-2 pl-1">Ending Date</label>
152163
<input
153164
type="date"
154-
className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
165+
className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
155166
{...register("end", { required: "Ending date is required" })}
156167
/>
157168
{errors.end && <p className="text-red-500">{errors.end?.message}</p>}
158169

159170
<button
160171
type="submit"
161-
className="w-full p-3 flex justify-center items-centerr bg-[#56C870] text-white rounded font-medium hover:bg-green-600 transition-colors"
172+
className="w-full p-2 flex justify-center items-centerr bg-[#56C870] text-white rounded font-medium hover:bg-green-600 transition-colors"
162173
>
163174
{isSubmitting ? (
164175
<ThreeDots height="20" width="30" color="#ffffff" />

‎src/components/Cohort/updateCohortmodal.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ const UpdateCohortModal = ({ open, onClose, cohortData }) => {
6060

6161
return (
6262
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
63-
<div className="rounded-lg w-[30%] p-6 relative bg-white dark:bg-dark-frame-bg">
64-
<div className="flex justify-between items-center mb-6">
63+
<div className="max-h-full text-sm rounded-lg w-[30%] p-6 relative bg-white dark:bg-dark-frame-bg">
64+
<div className="flex justify-between items-center mb-3">
6565
<h2 className="text-black text-xl font-semibold dark:text-white">
6666
UPDATE COHORT
6767
</h2>
@@ -73,16 +73,18 @@ const UpdateCohortModal = ({ open, onClose, cohortData }) => {
7373
</button>
7474
</div>
7575

76-
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
76+
<form onSubmit={handleSubmit(onSubmit)} className="space-y-1">
77+
<label className="inline-block pt-2 pl-1">Name</label>
7778
<input
7879
type="text"
79-
placeholder="Name"
80-
className="w-full p-3 rounded bg-transparent border border-gray-600 placeholder:text-black focus:outline-none dark:placeholder:text-white"
80+
placeholder="Enter cohort name"
81+
className="w-full p-2 rounded bg-transparent border border-gray-600 placeholder:text-black focus:outline-none dark:placeholder:text-white"
8182
{...register("title")}
8283
/>
84+
<label className="inline-block pt-2 pl-1">Application cycle</label>
8385

8486
<select
85-
className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
87+
className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
8688
{...register("cycle")}
8789
>
8890
<option value="" className="bg-gray-200 dark:bg-[#1e2124]">
@@ -98,9 +100,9 @@ const UpdateCohortModal = ({ open, onClose, cohortData }) => {
98100
</option>
99101
))}
100102
</select>
101-
103+
<label className="inline-block pt-2 pl-1">Program</label>
102104
<select
103-
className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
105+
className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
104106
{...register("program")}
105107
>
106108
<option value="" className="bg-gray-200 dark:bg-[#1e2124]">
@@ -116,9 +118,9 @@ const UpdateCohortModal = ({ open, onClose, cohortData }) => {
116118
</option>
117119
))}
118120
</select>
119-
121+
<label className="inline-block pt-2 pl-1">Phase</label>
120122
<select
121-
className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
123+
className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
122124
{...register("phase")}
123125
>
124126
<option value="" className="bg-gray-200 dark:bg-[#1e2124]">
@@ -143,22 +145,22 @@ const UpdateCohortModal = ({ open, onClose, cohortData }) => {
143145
Apprenticeship
144146
</option>
145147
</select>
146-
148+
<label className="inline-block pt-2 pl-1">Starting Date</label>
147149
<input
148150
type="date"
149-
className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
151+
className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
150152
{...register("start")}
151153
/>
152-
154+
<label className="inline-block pt-2 pl-1">Ending Date</label>
153155
<input
154156
type="date"
155-
className="w-full p-3 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
157+
className="w-full p-2 rounded bg-transparent border border-gray-600 text-black focus:outline-none dark:text-white"
156158
{...register("end")}
157159
/>
158160

159161
<button
160162
type="submit"
161-
className="w-full p-3 flex justify-center items-center bg-[#56C870] text-white rounded font-medium hover:bg-green-600 transition-colors"
163+
className="w-full p-2 flex justify-center items-center bg-[#56C870] text-white rounded font-medium hover:bg-green-600 transition-colors"
162164
>
163165
{isSubmitting ? (
164166
<ThreeDots height="20" width="30" color="#ffffff" />

‎src/pages/Cohort/Cohort.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { Link } from "react-router-dom";
1515
import { toast } from "react-toastify";
1616
import UpdateCohortModal from "../../components/Cohort/updateCohortmodal";
1717
import { Spinner } from "flowbite-react";
18+
import { CohortSkeleton } from "../../skeletons/cohortSkeleton";
19+
1820

1921
const CohortsPage = () => {
2022
const [anchorEl, setAnchorEl] = useState({});
@@ -89,8 +91,8 @@ const CohortsPage = () => {
8991
setCurrentPage(newPage);
9092
}
9193
};
92-
if (isLoading) {
93-
return <Spinner className="mt-96" />;
94+
if (isLoading || !data) {
95+
return <CohortSkeleton />;
9496
}
9597

9698
return (

‎src/pages/Cohort/CohortDetailPage.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { getCohort, getAllTraineeApplicants, acceptTrainee } from "../../redux/a
88
import { useAppDispatch, useAppSelector } from "../../hooks/hooks";
99
import { useParams } from "react-router-dom";
1010
import { Spinner } from "flowbite-react";
11+
import { CohortDetailSkeleton } from "../../skeletons/singleCohortSketon";
1112

1213
const CohortsDetailPage = () => {
1314
const [anchorEl, setAnchorEl] = useState(null);
@@ -69,9 +70,9 @@ const CohortsDetailPage = () => {
6970

7071
const traineesWithoutCohort = trainees?.filter((trainee) => !trainee.cohort);
7172

72-
if (isLoading) {
73-
return <Spinner className="mt-96" />;
74-
}
73+
if (!traineeCohort || isLoading) {
74+
return <CohortDetailSkeleton />;
75+
}
7576

7677
const trainee = traineeCohort?.trainees || [];
7778

‎src/redux/actions/cohortActions.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ export const getCohort = (getCohortId: any) => async (dispatch: any) => {
9999
});
100100
const cohortData = await response.data.data.getCohort;
101101
dispatch(creator(GET_TRAINEE_COHORT, cohortData));
102+
return cohortData.length;
102103
} catch (error) {
103104
if (error) {
104105
return console.log(error);

‎src/redux/reducers/cohortReducer.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,13 @@ export default (state = initialState, { type, payload }: any) => {
2727
...state,
2828
isLoading: false,
2929
data: payload,
30-
errors: null,
3130
};
3231

3332
case GET_TRAINEE_COHORT:
3433
return {
3534
...state,
3635
isLoading: false,
37-
isLoaded: true,
38-
traineeCohort: payload,
39-
errors: null,
36+
traineeCohort: payload
4037
};
4138
case CREATE_COHORT_SUCCESS:
4239
return {
@@ -48,12 +45,14 @@ export default (state = initialState, { type, payload }: any) => {
4845
return {
4946
...state,
5047
isLoading: false,
48+
isLoaded: true,
5149
errors: payload,
5250
};
5351
case GET_ALL_TRAINEES:
5452
return {
5553
...state,
5654
isLoading: false,
55+
isLoaded: true,
5756
trainees: payload,
5857
};
5958
case ADD_TRAINEE_IN_COHORT:

‎src/skeletons/cohortSkeleton.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
export const CohortSkeleton = () => {
2+
return (
3+
<div className="space-y-4 mr-32 bg-white dark:bg-dark-bg shadow-lg py-8 rounded-md w-[90%]">
4+
<div className="h-12 flex items-center gap-4 rounded w-[98%] mb-2 px-4 ml-4">
5+
<div className="bg-gray-600 h-10 rounded w-[10%] mb-2 space-x-4 px-4"></div>
6+
</div>
7+
<div className="bg-gray-600 h-7 rounded w-[10%] mb-2 space-x-4 px-4 ml-8"></div>
8+
<div className="bg-gray-600 h-12 rounded w-[96%] mb-2 space-x-8 px-4 ml-8"></div>
9+
{Array(5)
10+
.fill(0)
11+
.map((_, i) => (
12+
<div
13+
key={i}
14+
className="animate-pulse flex items-center space-x-8 px-4 ml-4"
15+
>
16+
<div className="bg-gray-600 h-6 rounded w-1/4 md:w-1/6 lg:w-1/4"></div>
17+
<div className="bg-gray-600 h-6 rounded w-1/4 md:w-1/6 lg:w-1/4"></div>
18+
<div className="bg-gray-600 h-6 rounded w-1/4 md:w-1/6 lg:w-1/4"></div>
19+
<div className="bg-gray-600 h-6 rounded w-1/4 md:w-1/8 lg:w-1/4"></div>
20+
</div>
21+
))}
22+
</div>
23+
);
24+
};

‎src/skeletons/singleCohortSketon.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
export const CohortDetailSkeleton = () => {
2+
return (
3+
<div className="space-y-6 bg-white dark:bg-dark-bg shadow-lg py-8 rounded-md w-[90%] mx-auto">
4+
{/* Title */}
5+
<div className="h-8 bg-gray-600 rounded w-1/4 ml-4 mb-4"></div>
6+
7+
{/* Information Section */}
8+
<div className="bg-gray-200 dark:bg-dark-tertiary rounded-lg w-[50%] ml-4 p-6 space-y-4">
9+
{Array(6)
10+
.fill(0)
11+
.map((_, i) => (
12+
<div
13+
key={i}
14+
className="flex justify-between bg-gray-600 h-6 rounded w-[60%] px-4"
15+
></div>
16+
))}
17+
</div>
18+
19+
{/* Trainees Section */}
20+
<div className="w-[70%] ml-4 mt-8">
21+
<div className="flex justify-between items-center pb-5">
22+
<div className="bg-gray-600 h-8 rounded w-1/4"></div>
23+
<div className="bg-gray-600 h-10 rounded w-1/6"></div>
24+
</div>
25+
<div className="space-y-3">
26+
{Array(4)
27+
.fill(0)
28+
.map((_, i) => (
29+
<div
30+
key={i}
31+
className="flex items-center justify-between space-x-4 bg-gray-600 h-8 rounded w-full"
32+
></div>
33+
))}
34+
</div>
35+
</div>
36+
</div>
37+
);
38+
};

0 commit comments

Comments
 (0)