Skip to content

Commit 266d7ed

Browse files
Dawaic6shebz2023
Dawaic6
and
shebz2023
authored
skeleton loader #415 (#516)
* skeleton loader #415 * fix irrelevant skeletons while fetching * fix irrelevant skeletons while fetching --------- Co-authored-by: shebz2023 <[email protected]>
1 parent 1b58a2a commit 266d7ed

25 files changed

+395
-80
lines changed

‎package-lock.json‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
"istanbul": "^0.4.5",
7777
"jsonwebtoken": "^9.0.1",
7878
"jwt-decode": "^3.1.2",
79+
"lottie-react": "^2.4.0",
7980
"moment": "^2.29.4",
8081
"pnpm": "^8.6.11",
8182
"react-apexcharts": "^1.4.1",

‎src/Skeletons/Calender.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+
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+
</div>
47+
</div>
48+
);
49+
}
50+
51+
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/assets/logoAnimation.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"v":"5.6.6","ip":0,"op":80,"fr":60,"w":157,"h":96,"layers":[{"ind":5823,"nm":"surface21583","ao":0,"ip":0,"op":80,"st":0,"ty":4,"ks":{"ty":"tr","o":{"k":100},"r":{"k":0},"p":{"a":0,"k":[0,0,0],"ix":2},"a":{"k":[0,0]},"s":{"k":[133.05,133.33]},"sk":{"k":0},"sa":{"k":0}},"shapes":[{"ty":"gr","hd":false,"nm":"surface21583","it":[{"ty":"gr","hd":false,"it":[{"ty":"sh","ks":{"k":{"i":[[0,0],[1.7,-12.3],[0.4,0.4],[1.3,5.2],[3.5,0],[1.6,-4.5],[4.3,4.4],[5,-5.1],[-4.8,-4.8],[-4.9,4.8],[-3,0],[-1.7,1.3],[-0.2,-0.2],[-1.6,-6.8],[-4.3,0],[-2.1,15.7],[-0.3,0.2],[-1,-5.6],[-3.3,-1.3],[-3.5,8.6],[-4.8,-4.7],[-4.8,4.9],[4.8,4.8],[5.2,-5.3],[2.9,0.1],[2.3,-5.3],[3.3,19],[1.7,1.4],[2.3,-2.8]],"o":[[-1.4,1.8],[-1.3,9.1],[-0.4,-0.4],[-2.2,-9.4],[-2.5,0],[-2.1,5.6],[-5.3,-5.4],[-4.8,4.8],[4.8,4.8],[2.2,-2.2],[2.5,0],[1.5,-1.2],[0.2,0.2],[3.3,13.2],[4.9,0],[1,-7.7],[0.4,-0.2],[2.3,13],[4.5,1.7],[3.7,-8.9],[4.9,4.9],[4.8,-4.8],[-5,-5],[-2.6,2.7],[-4.4,-0.1],[-2.2,4.9],[-2.1,-11.8],[-2.8,-2.4],[0,0]],"v":[[62.2,9.4],[58,28.5],[55,44.3],[52,34],[43.6,20],[36.1,28.1],[27.5,29.7],[11.1,29.1],[11.1,44.9],[27,44.9],[33.8,42],[40.4,39.9],[43.5,38.2],[46.9,51],[56.1,67],[64.5,48],[67,33.5],[69.5,43.3],[75.7,59.11],[86.4,50],[97,44.8],[112.9,44.91],[112.9,29.11],[96.6,29.61],[89.7,32.8],[81,39.5],[75.5,25.5],[70.8,8.7],[62.2,9.4]],"c":true}}},{"ty":"sh","ks":{"k":{"i":[[0,0],[0,-2.7],[5.3,0],[0,5.3],[-1.3,1.3],[-2.7,0],[-1.3,-1.3]],"o":[[1.3,1.3],[0,5.3],[-5.3,0],[0,-2.7],[1.3,-1.3],[2.7,0],[0,0]],"v":[[25,31],[27,37],[19,45],[11,37],[13,31],[19,29],[25,31]],"c":true}}},{"ty":"sh","ks":{"k":{"i":[[0,0],[0,-2.7],[5.3,0],[0,5.3],[-1.3,1.3],[-2.7,0],[-1.3,-1.3]],"o":[[1.3,1.3],[0,5.3],[-5.3,0],[0,-2.7],[1.3,-1.3],[2.7,0],[0,0]],"v":[[111,31],[113,37],[105,45],[97,37],[99,31],[105,29],[111,31]],"c":true}}},{"ty":"fl","o":{"k":100},"c":{"k":[0.5569,0.5569,1,1]}},{"ty":"tr","o":{"k":100},"r":{"k":0},"p":{"k":[0,0]},"a":{"k":[0,0]},"s":{"k":[100,100]},"sk":{"k":0},"sa":{"k":0},"hd":false}]},{"ty":"tr","o":{"k":100},"r":{"k":0},"p":{"k":[0,0]},"a":{"k":[0,0]},"s":{"k":[100,100]},"sk":{"k":0},"sa":{"k":0},"hd":false}]},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.35],"y":[1]},"o":{"x":[0.17],"y":[0.17]},"t":0,"s":[25]},{"t":55,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}]}],"meta":{"g":"LF SVG to Lottie"},"assets":[]}

‎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();
@@ -257,12 +262,16 @@ const Calendar = () => {
257262
>
258263
{t('Add event')}
259264
</button>
265+
{loading ? (
266+
<CalendarSkeleton />
267+
) : (
260268
<FullCalendar
261269
eventContent={renderEvent}
262270
events={data}
263271
plugins={[dayGridPlugin, interactionPlugin]}
264272
initialView="dayGridMonth"
265273
/>
274+
)}
266275
</div>
267276
</>
268277
);

‎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;
@@ -564,12 +565,15 @@ const Organizations = () => {
564565
</div>
565566
</div>
566567
<div className="">
568+
{getLoading ? (
569+
<OrgSkeleton/>
570+
) : (
567571
<DataTable
568572
columns={organizationColumns}
569573
data={organizationData ? (organizationData as [any]) : []}
570574
title={t('Organizations list')}
571-
loading={getLoading}
572575
/>
576+
)}
573577
</div>
574578
</div>
575579
</div>

‎src/components/Skeleton.tsx‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,11 @@
11
import React from 'react';
2+
import Lottie from 'lottie-react';
3+
import animatedLogo from '../assets/logoAnimation.json';
24

35
export default function Skeleton() {
46
return (
5-
<main className="page-main font-serif">
6-
<div className="border-2 p-2 md:p-4 min-h-screen min-w-full flex flex-col bg-white">
7-
<div className="flex flex-row justify-between">
8-
<div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse rounded-md hidden md:block w-[50%] md:w-[10%] md:mr-2" />
9-
<div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse rounded-md w-[50%] md:mx-2" />
10-
<div className="w-12 bg-gray-300 dark:bg-gray-600 animate-pulse h-12 rounded-full ml-auto mr-2 md:mx-2" />
11-
<div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse rounded-md w-[10%]" />
12-
13-
<div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse hidden md:block rounded-md w-[20%] ml-2" />
14-
</div>
15-
<div className="flex grow my-3 h-full flex-row justify-center">
16-
<div className="flex flex-grow bg-gray-300 dark:bg-gray-600 rounded-xl animate-pulse md:mr-2" />
17-
<div className="md:flex flex-grow hidden bg-gray-300 dark:bg-gray-600 rounded-xl animate-pulse ml-2" />
18-
</div>
19-
<div className="h-[7vh] my-4 bg-gray-300 dark:bg-gray-600 animate-pulse w-[50%] rounded-md mx-auto" />
20-
<div className="mt-auto w-full animate-pulse h-[8vh] flex justify-between">
21-
<div className="w-full md:w-[33%] bg-gray-300 dark:bg-gray-600 rounded-md" />
22-
<div className="hidden md:flex w-[33%] bg-gray-300 dark:bg-gray-600 rounded-md" />
23-
<div className="hidden md:flex w-[33%] bg-gray-300 dark:bg-gray-600 rounded-md" />
24-
</div>
25-
</div>
26-
</main>
7+
<div className="h-screen w-screen flex justify-center items-center bg-gradient-radial from-gray-800 to-white dark:from-black dark:to-gray-900">
8+
<Lottie className="h-24" animationData={animatedLogo} />
9+
</div>
2710
);
2811
}

0 commit comments

Comments
 (0)