Skip to content

Commit 0c3fe09

Browse files
Dawaic6Dawaic6
committed
skeleton loader match to respective layout
1 parent c2ae867 commit 0c3fe09

16 files changed

+2567
-2814
lines changed

‎package-lock.json

+2,107-2,362
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@
8888
"react-i18next": "^11.18.6",
8989
"react-icons": "^4.10.1",
9090
"react-loader-spinner": "^5.4.5",
91+
"react-loading-skeleton": "^3.4.0",
9192
"react-pdf": "^7.3.3",
9293
"react-pdf-js": "^5.1.0",
9394
"react-router": "^6.14.1",

‎src/Skeletons/calSkeleton.tsx

+64
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/orgSkeleton.tsx

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react';
2+
3+
function OrganizationTableSkeleton() {
4+
// Define unique identifiers for rows and headers
5+
const rows = [{ id: 'row-1' }, { id: 'row-2' }, { id: 'row-3' }];
6+
const headers = [
7+
{ id: 'header-1' },
8+
{ id: 'header-2' },
9+
{ id: 'header-3' },
10+
{ id: 'header-4' },
11+
];
12+
13+
return (
14+
<div className="bg-light-bg dark:bg-dark-frame-bg pb-10">
15+
<div className="bg-white dark:bg-dark-bg shadow-lg px-5 py-8 rounded-md w-full">
16+
<div className="animate-pulse">
17+
{/* Table Title Skeleton */}
18+
<div className="flex ml-2 items-center justify-between mb-4">
19+
<div
20+
className="h-6 bg-gray-200 rounded w-1/3"
21+
aria-label="Loading table title"
22+
/>
23+
</div>
24+
25+
<div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-2 overflow-x-auto">
26+
<div className="inline-block w-full lg:min-w-full shadow rounded-lg overflow-hidden">
27+
<table className="min-w-full leading-normal">
28+
<thead>
29+
<tr>
30+
{headers.map((header) => (
31+
<th
32+
key={header.id} // Use header.id for unique keys
33+
className="p-6 border-b-2 border-gray-200 bg-gray-100 dark:bg-neutral-600 text-center text-xs font-semibold text-gray-600 dark:text-white uppercase tracking-wider"
34+
>
35+
<div
36+
className="h-4 bg-gray-200 rounded w-1/4 mx-auto"
37+
aria-label={`Loading content for ${header.id}`}
38+
/>
39+
</th>
40+
))}
41+
</tr>
42+
</thead>
43+
<tbody>
44+
{rows.map((row) => (
45+
<tr key={row.id}>
46+
{headers.map((header) => (
47+
<td
48+
key={`cell-${row.id}-${header.id}`} // Use a combination of row and header IDs for unique keys
49+
className="px-5 py-5 border-b border-gray-200 bg-white dark:bg-dark-bg text-sm"
50+
>
51+
<div
52+
className="h-4 bg-gray-200 rounded w-3/4 mx-auto"
53+
aria-label={`Loading content for row ${row.id}, column ${header.id}`}
54+
/>
55+
</td>
56+
))}
57+
</tr>
58+
))}
59+
</tbody>
60+
</table>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
);
67+
}
68+
69+
export default OrganizationTableSkeleton;

‎src/Skeletons/perfomanceSkeleton.tsx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
// src/components/PerformanceSkeleton.js
2+
import React from 'react';
3+
import Skeleton from 'react-loading-skeleton';
4+
import 'react-loading-skeleton/dist/skeleton.css';
5+
6+
export default function PerformanceSkeleton() {
7+
// Define unique identifiers for rows and cells
8+
const rowIds = ['row-1', 'row-2'];
9+
const cellIds = [
10+
'SPRINT',
11+
'PHASE',
12+
'QUANTITY',
13+
'QUALITY',
14+
'PROFESSIONAL SKILLS',
15+
'AVERAGE',
16+
];
17+
18+
return (
19+
<div className="p-4">
20+
{/* Header Skeleton */}
21+
<Skeleton height={30} width={80} />
22+
<Skeleton height={30} width="40%" className="mt-6" />
23+
<Skeleton height={60} className="mt-6" />
24+
25+
{/* Skeleton for Table Rows */}
26+
{rowIds.map((rowId) => (
27+
<div key={rowId} className="grid grid-cols-6 gap-4 mb-2">
28+
{cellIds.map((cellId) => (
29+
<Skeleton
30+
key={`${rowId}-${cellId}`}
31+
height={30}
32+
width="100%"
33+
className="mt-4"
34+
/>
35+
))}
36+
</div>
37+
))}
38+
39+
{/* Pagination Skeleton */}
40+
<div className="flex items-center justify-between mt-4">
41+
<Skeleton width={80} height={20} />
42+
<div className="flex space-x-2">
43+
<Skeleton circle width={30} height={30} />
44+
<Skeleton circle width={30} height={30} />
45+
</div>
46+
<Skeleton width={80} height={30} />
47+
</div>
48+
</div>
49+
);
50+
}

0 commit comments

Comments
 (0)