Skip to content

Commit 1f9c2fe

Browse files
Dawaic6Dawaic6
committed
skeleton loader #415 
1 parent f0d1c91 commit 1f9c2fe

18 files changed

+280
-30
lines changed

‎src/Skeletons/Calender.skeleton.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
3+
function CalendarSkeleton() {
4+
// Define unique identifiers for calendar days
5+
const days = Array.from({ length: 35 }, (_, i) => ({ id: `day-${i + 1}` })); // 35 days with unique ids
6+
// Define unique identifiers for events
7+
const events = [{ id: 'event-1' }, { id: 'event-2' }]; // Define event placeholders with unique ids
8+
9+
return (
10+
<div className="bg-light-bg dark:bg-dark-frame-bg pb-10">
11+
<div className="animate-pulse">
12+
{/* Month and Year Display */}
13+
<div className="flex justify-between items-center mb-4">
14+
<div className="h-6 bg-gray-200 rounded w-24" />
15+
<div className="h-6 bg-gray-200 rounded w-16" />
16+
</div>
17+
18+
{/* Calendar Grid */}
19+
<div className="grid grid-cols-7 gap-1">
20+
{/* Weekdays Headers */}
21+
{[
22+
'Sunday',
23+
'Monday',
24+
'Tuesday',
25+
'Wednesday',
26+
'Thursday',
27+
'Friday',
28+
'Saturday',
29+
].map((day) => (
30+
<div key={day} className="h-6 bg-gray-200 rounded text-center">
31+
<div className="h-4 bg-gray-200 rounded w-1/2 mx-auto" />
32+
</div>
33+
))}
34+
35+
{/* Calendar Days */}
36+
{days.map((day) => (
37+
<div
38+
key={day.id}
39+
className="h-20 bg-gray-200 rounded p-2 flex flex-col justify-between"
40+
>
41+
<div className="h-4 bg-gray-200 rounded w-1/4" />
42+
{/* Additional skeleton elements can be added here */}
43+
</div>
44+
))}
45+
</div>
46+
47+
{/* Event List */}
48+
<div className="mt-4 space-y-2">
49+
{events.map((event) => (
50+
<div
51+
key={event.id}
52+
className="flex items-center justify-between p-2 bg-gray-800 rounded"
53+
>
54+
<div className="h-4 bg-gray-200 rounded w-3/4" />
55+
<div className="h-4 bg-gray-200 rounded w-6" />
56+
</div>
57+
))}
58+
</div>
59+
</div>
60+
</div>
61+
);
62+
}
63+
64+
export default CalendarSkeleton;

‎src/Skeletons/Organization.skeleton.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
import Skeleton from 'react-loading-skeleton';
3+
import 'react-loading-skeleton/dist/skeleton.css';
4+
5+
export default function OrgSkeleton() {
6+
// Define an array with unique keys
7+
const skeletonRows = [{ id: 'row-1' }, { id: 'row-2' }, { id: 'row-3' }];
8+
9+
return (
10+
<div className="p-4">
11+
{/* Header Skeleton */}
12+
<Skeleton height={30} width={80} />
13+
<Skeleton height={30} width="40%" className="mt-6" />
14+
<div className="p-6 border-b-2 bg-gray-100 mt-6">
15+
{/* <Skeleton height={60} className="mt-6 " /> */}
16+
<div className="flex px-6">
17+
<Skeleton width={100} height={20} className='px-6 '/>
18+
<Skeleton width={100} height={20} className=' px-6 ml-20' />
19+
<Skeleton width={100} height={20} className=' px-6 ml-20' />
20+
<Skeleton width={100} height={20} className='px-6 ml-20'/>
21+
<Skeleton width={100} height={20} className='px-6 ml-28'/>
22+
</div>
23+
</div>
24+
{/* Skeleton for Table Rows */}
25+
{skeletonRows.map((row) => (
26+
<div key={row.id} className="flex mb-4">
27+
{/* Name and Email Skeleton */}
28+
<div className="flex space-x-4 px-16 w-4/5 ">
29+
<Skeleton height={20} width={100} className="mt-2 px-6" />
30+
<Skeleton height={20} width={100} className="mt-2 px-16 ml-6 " />
31+
<Skeleton height={50} width={150} className="mt-2 px-20 ml-6" />
32+
<Skeleton height={20} width={50} className="mt-2 px-24 ml-6" />
33+
</div>
34+
35+
{/* Action Buttons Skeleton */}
36+
<div className="flex space-x-4 ml-20">
37+
{/* <Skeleton width={30} height={30} borderRadius="50%" /> */}
38+
<Skeleton width={30} height={30} borderRadius="50%"/>
39+
<Skeleton width={30} height={30} borderRadius="50%" />
40+
</div>
41+
</div>
42+
))}
43+
<div className="flex justify-between">
44+
<div className="flex space-x-4 p-4">
45+
<Skeleton width={50} height={30} />
46+
<Skeleton width={50} height={30} />
47+
</div>
48+
<div className='mr-14'>
49+
<Skeleton width={300} height={30} />
50+
</div>
51+
</div>
52+
</div>
53+
);
54+
}

‎src/Skeletons/gradingSkeleton.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import Skeleton from 'react-loading-skeleton';
3+
import 'react-loading-skeleton/dist/skeleton.css';
4+
5+
export default function GradingSkeleton() {
6+
// Define an array with unique keys
7+
const skeletonRows = [{ id: 'row-1' }, { id: 'row-2' }, { id: 'row-3' }];
8+
9+
return (
10+
<div className="p-4">
11+
{/* Header Skeleton */}
12+
<Skeleton height={30} width={80} />
13+
<Skeleton height={30} width="40%" className="mt-6" />
14+
<div className="p-6 border-b-2 bg-gray-100 mt-6">
15+
{/* <Skeleton height={60} className="mt-6 " /> */}
16+
<div className="flex px-6">
17+
<Skeleton width={100} height={20} className='px-6 '/>
18+
<Skeleton width={100} height={20} className=' px-6 ml-20' />
19+
<Skeleton width={100} height={20} className=' px-6 ml-20' />
20+
<Skeleton width={100} height={20} className='px-6 ml-20'/>
21+
<Skeleton width={100} height={20} className='px-6 ml-28'/>
22+
</div>
23+
</div>
24+
{/* Skeleton for Table Rows */}
25+
{skeletonRows.map((row) => (
26+
<div key={row.id} className="flex items-center mb-4">
27+
{/* Name and Email Skeleton */}
28+
<div className="flex-1">
29+
<Skeleton height={20} width="85%" className="mt-2" />
30+
</div>
31+
32+
{/* Action Buttons Skeleton */}
33+
<div className="flex space-x-4 mr-16">
34+
<Skeleton width={30} height={30} borderRadius="50%" />
35+
<Skeleton width={30} height={30} borderRadius="50%"/>
36+
<Skeleton width={30} height={30} borderRadius="50%" />
37+
</div>
38+
</div>
39+
))}
40+
<div className="flex justify-between">
41+
<div className="flex space-x-4 p-4">
42+
<Skeleton width={50} height={30} />
43+
<Skeleton width={50} height={30} />
44+
</div>
45+
<div className='mr-14'>
46+
<Skeleton width={300} height={30} />
47+
</div>
48+
</div>
49+
</div>
50+
);
51+
}

‎src/Skeletons/ttl.skeleton.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import Skeleton from 'react-loading-skeleton';
3+
import 'react-loading-skeleton/dist/skeleton.css';
4+
5+
export default function TtlSkeleton() {
6+
// Define an array with unique keys
7+
const skeletonRows = [{ id: 'row-1' }, { id: 'row-2' }, { id: 'row-3' }];
8+
9+
return (
10+
<div className="p-4">
11+
{/* Header Skeleton */}
12+
<Skeleton height={30} width={80} />
13+
<Skeleton height={30} width="40%" className="mt-6" />
14+
<div className="p-6 border-b-2 bg-gray-100 mt-6">
15+
{/* <Skeleton height={60} className="mt-6 " /> */}
16+
<div className="flex px-6">
17+
<Skeleton width={100} height={20} className='px-6 '/>
18+
<Skeleton width={100} height={20} className=' px-6 ml-20' />
19+
<Skeleton width={100} height={20} className=' px-6 ml-20' />
20+
<Skeleton width={100} height={20} className='px-6 ml-20'/>
21+
<Skeleton width={100} height={20} className='px-6 ml-28'/>
22+
</div>
23+
</div>
24+
{/* Skeleton for Table Rows */}
25+
{skeletonRows.map((row) => (
26+
<div key={row.id} className="flex items-center mb-4">
27+
{/* Name and Email Skeleton */}
28+
<div className="flex-1">
29+
<Skeleton height={20} width="85%" className="mt-2" />
30+
</div>
31+
32+
{/* Action Buttons Skeleton */}
33+
<div className="flex space-x-4 mr-16">
34+
<Skeleton width={30} height={30} borderRadius="50%" />
35+
<Skeleton width={30} height={30} borderRadius="50%"/>
36+
<Skeleton width={30} height={30} borderRadius="50%" />
37+
</div>
38+
</div>
39+
))}
40+
<div className="flex justify-between">
41+
<div className="flex space-x-4 p-4">
42+
<Skeleton width={50} height={30} />
43+
<Skeleton width={50} height={30} />
44+
</div>
45+
<div className='mr-14'>
46+
<Skeleton width={300} height={30} />
47+
</div>
48+
</div>
49+
</div>
50+
);
51+
}

‎src/components/Calendar.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import useDocumentTitle from '../hook/useDocumentTitle';
1111
import { useLazyQuery, useMutation } from '@apollo/client';
1212
import { ADD_EVENT, GET_EVENTS } from '../Mutations/event';
1313
import moment from 'moment';
14+
import CalendarSkeleton from '../Skeletons/Calender.skeleton'
15+
1416
/* istanbul ignore next */
1517

1618
const Calendar = () => {
@@ -25,6 +27,7 @@ const Calendar = () => {
2527
timeToFinish: '',
2628
});
2729
const [data, setData] = useState<EventInput[]>([]);
30+
const [loading, setLoading] = useState(true);
2831
const [getEvents] = useLazyQuery(GET_EVENTS);
2932
const [createEvent] = useMutation(ADD_EVENT);
3033
useEffect(() => {
@@ -48,6 +51,8 @@ const Calendar = () => {
4851
} catch (error) {
4952
console.log({ eventsError: data });
5053
// toast.error(error?.message || 'Something went wrong');
54+
}finally {
55+
setLoading(false);
5156
}
5257
};
5358
fetchData();
@@ -256,12 +261,16 @@ const Calendar = () => {
256261
>
257262
{t('Add event')}
258263
</button>
264+
{loading ? (
265+
<CalendarSkeleton />
266+
) : (
259267
<FullCalendar
260268
eventContent={renderEvent}
261269
events={data}
262270
plugins={[dayGridPlugin, interactionPlugin]}
263271
initialView="dayGridMonth"
264272
/>
273+
)}
265274
</div>
266275
</>
267276
);

‎src/components/Organizations.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { toast } from 'react-toastify';
1313
import { Icon } from '@iconify/react';
1414

1515
import DataTable from '../components/DataTable';
16+
import OrgSkeleton from '../Skeletons/Organization.skeleton';
1617

1718
export interface Admin {
1819
id: string;
@@ -560,12 +561,15 @@ const Organizations = () => {
560561
</div>
561562
</div>
562563
<div className="">
564+
{getLoading ? (
565+
<OrgSkeleton/>
566+
) : (
563567
<DataTable
564568
columns={organizationColumns}
565569
data={organizationData ? (organizationData as [any]) : []}
566570
title={t('Organizations list')}
567-
loading={getLoading}
568571
/>
572+
)}
569573
</div>
570574
</div>
571575
</div>

‎src/containers/DashRoutes.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ function DashRoutes() {
9494
<Sidebar toggle={toggleNav} style="" />
9595
</MenuProvider>
9696
<main className=" px-4 md:px-8 py-4 md:py-8 w-[100%] bg-light-bg dark:bg-dark-frame-bg">
97-
<Suspense fallback={<Square />}>
97+
{/* <Suspense fallback={<Square />}> */}
9898
<Routes>
9999
<Route path="/dashboard" element={<Dashboard />} />
100100
<Route path="/trainees" element={<AdminTraineeDashboard />} />
@@ -168,7 +168,7 @@ function DashRoutes() {
168168
<Route path="/cards" element={<CoordinatorCards />} />
169169
<Route path="/ttl-trainees" element={<TtlTraineeDashboard />} />
170170
</Routes>
171-
</Suspense>
171+
{/* </Suspense> */}
172172
</main>
173173
</PrivateRoute>
174174
);

‎src/containers/admin-dashBoard/Cohorts.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import DeleteCohortModal from './DeleteCohortModal';
1111
import UpdateCohortModal from './UpdateCohortModal';
1212
import CohortTraineeModal from './CohortTraineeModal';
1313
import CohortTeamsModel from './CohortTeamsModal';
14+
import TtlSkeleton from '../../Skeletons/ttl.skeleton';
1415

1516
export interface Cohort {
1617
id: string;
@@ -353,7 +354,7 @@ function AdminCohort() {
353354
</div>
354355
</div>
355356
<div >
356-
{!getLoading && (
357+
{getLoading ? TtlSkeleton ():(
357358
<DataTable
358359
columns={cohortColumns}
359360
data={cohortData ? (cohortData as [any]) : [{}]}

‎src/containers/admin-dashBoard/CoordinatorModal.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { gql, useQuery } from '@apollo/client';
33
import { useTranslation } from 'react-i18next';
44
import DataTable from '../../components/DataTable';
55
import Spinner from '../../components/Spinner';
6+
import TtlSkeleton from '../../Skeletons/ttl.skeleton';
67

78
const GET_COORDINATORS = gql`
89
query Query ($orgToken: String){
@@ -76,10 +77,7 @@ export default function CoordinatorsPage() {
7677
</div>
7778
<div className=" overflow-x-auto">
7879
{loading ? (
79-
<div className="flex justify-center items-center h-48">
80-
<Spinner />
81-
<div className="spinner" />
82-
</div>
80+
<TtlSkeleton/>
8381
) : (
8482
<DataTable
8583
columns={columns}

‎src/containers/admin-dashBoard/ManagerRoles.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import Square from '../../Skeletons/Square';
2121
import { toast } from 'react-toastify';
2222
import { GET_TEAM_QUERY } from '../../Mutations/manageStudentMutations';
2323
import { GET_TEAMS } from '../../Mutations/teamMutation';
24+
import TtlSkeleton from '../../Skeletons/ttl.skeleton';
2425
const AdminSission = () => {
2526
const { t } = useTranslation();
2627
useDocumentTitle('Roles & Access');
@@ -324,16 +325,16 @@ const AdminSission = () => {
324325
{/* =========================== End:: delete Session Model =============================== */}
325326
<div className="bg-light-bg dark:bg-dark-frame-bg pb-16 overflow-y-auto overflow-x-hidden">
326327
<div>
327-
<DataTable
328-
data={newUsers.length > 0 ? newUsers : users}
329-
columns={columns}
330-
title="Manageaccess"
331-
/>
328+
<DataTable
329+
data={newUsers.length > 0 ? newUsers : users}
330+
columns={columns}
331+
title="Manageaccess"
332+
/>
332333
</div>
333334
</div>
334335
</>
335336
) : (
336-
<Square />
337+
<TtlSkeleton/>
337338
)}
338339
</>
339340
);

0 commit comments

Comments
 (0)