skeleton loader #415

package.json

@@ -76,6 +76,7 @@
     "istanbul": "^0.4.5",
     "jsonwebtoken": "^9.0.1",
     "jwt-decode": "^3.1.2",
+    "lottie-react": "^2.4.0",
     "moment": "^2.29.4",
     "pnpm": "^8.6.11",
     "react-apexcharts": "^1.4.1",

src/Skeletons/Calender.skeleton.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+function CalendarSkeleton() {
+  // Define unique identifiers for calendar days
+  const days = Array.from({ length: 35 }, (_, i) => ({ id: `day-${i + 1}` })); // 35 days with unique ids
+  // Define unique identifiers for events
+  const events = [{ id: 'event-1' }, { id: 'event-2' }]; // Define event placeholders with unique ids
+
+  return (
+    <div className="bg-light-bg dark:bg-dark-frame-bg pb-10">
+      <div className="animate-pulse">
+        {/* Month and Year Display */}
+        <div className="flex justify-between items-center mb-4">
+          <div className="h-6 bg-gray-200 rounded w-24" />
+          <div className="h-6 bg-gray-200 rounded w-16" />
+        </div>
+
+        {/* Calendar Grid */}
+        <div className="grid grid-cols-7 gap-1">
+          {/* Weekdays Headers */}
+          {[
+            'Sunday',
+            'Monday',
+            'Tuesday',
+            'Wednesday',
+            'Thursday',
+            'Friday',
+            'Saturday',
+          ].map((day) => (
+            <div key={day} className="h-6 bg-gray-200 rounded text-center">
+              <div className="h-4 bg-gray-200 rounded w-1/2 mx-auto" />
+            </div>
+          ))}
+
+          {/* Calendar Days */}
+          {days.map((day) => (
+            <div
+              key={day.id}
+              className="h-20 bg-gray-200 rounded p-2 flex flex-col justify-between"
+            >
+              <div className="h-4 bg-gray-200 rounded w-1/4" />
+              {/* Additional skeleton elements can be added here */}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CalendarSkeleton;

src/Skeletons/Organization.skeleton.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+export default function OrgSkeleton() {
+  // Define an array with unique keys
+  const skeletonRows = [{ id: 'row-1' }, { id: 'row-2' }, { id: 'row-3' }];
+
+  return (
+    <div className="p-4">
+      {/* Header Skeleton */}
+      <Skeleton height={30} width={80} />
+      <Skeleton height={30} width="40%" className="mt-6" />
+      <div className="p-6 border-b-2 bg-gray-100 mt-6">
+      {/* <Skeleton height={60} className="mt-6 " /> */}
+        <div className="flex px-6">
+            <Skeleton width={100} height={20} className='px-6 '/>
+            <Skeleton width={100} height={20} className=' px-6 ml-20' />
+            <Skeleton width={100} height={20} className=' px-6 ml-20' />
+            <Skeleton width={100} height={20} className='px-6 ml-20'/>
+            <Skeleton width={100} height={20} className='px-6 ml-28'/>
+        </div>
+      </div>
+      {/* Skeleton for Table Rows */}
+      {skeletonRows.map((row) => (
+        <div key={row.id} className="flex  mb-4">
+          {/* Name and Email Skeleton */}
+          <div className="flex space-x-4 px-16 w-4/5 ">
+            <Skeleton height={20} width={100} className="mt-2 px-6" />
+            <Skeleton height={20} width={100} className="mt-2 px-16 ml-6 " />
+            <Skeleton height={50} width={150} className="mt-2 px-20 ml-6" />
+            <Skeleton height={20} width={50} className="mt-2 px-24 ml-6" />
+          </div>
+
+          {/* Action Buttons Skeleton */}
+          <div className="flex space-x-4 ml-20">
+            {/* <Skeleton width={30} height={30} borderRadius="50%" /> */}
+            <Skeleton width={30} height={30} borderRadius="50%"/>
+            <Skeleton width={30} height={30} borderRadius="50%" />
+          </div>
+        </div>
+      ))}
+      <div className="flex  justify-between">
+        <div className="flex space-x-4 p-4">
+        <Skeleton width={50} height={30} />
+        <Skeleton width={50} height={30} />
+        </div>
+        <div className='mr-14'>
+        <Skeleton width={300} height={30} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/Skeletons/gradingSkeleton.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+export default function GradingSkeleton() {
+  // Define an array with unique keys
+  const skeletonRows = [{ id: 'row-1' }, { id: 'row-2' }, { id: 'row-3' }];
+
+  return (
+    <div className="p-4">
+      {/* Header Skeleton */}
+      <Skeleton height={30} width={80} />
+      <Skeleton height={30} width="40%" className="mt-6" />
+      <div className="p-6 border-b-2 bg-gray-100 mt-6">
+      {/* <Skeleton height={60} className="mt-6 " /> */}
+        <div className="flex px-6">
+            <Skeleton width={100} height={20} className='px-6 '/>
+            <Skeleton width={100} height={20} className=' px-6 ml-20' />
+            <Skeleton width={100} height={20} className=' px-6 ml-20' />
+            <Skeleton width={100} height={20} className='px-6 ml-20'/>
+            <Skeleton width={100} height={20} className='px-6 ml-28'/>
+        </div>
+      </div>
+      {/* Skeleton for Table Rows */}
+      {skeletonRows.map((row) => (
+        <div key={row.id} className="flex items-center mb-4">
+          {/* Name and Email Skeleton */}
+          <div className="flex-1">
+            <Skeleton height={20} width="85%" className="mt-2" />
+          </div>
+
+          {/* Action Buttons Skeleton */}
+          <div className="flex space-x-4 mr-16">
+            <Skeleton width={30} height={30} borderRadius="50%" />
+            <Skeleton width={30} height={30} borderRadius="50%"/>
+            <Skeleton width={30} height={30} borderRadius="50%" />
+          </div>
+        </div>
+      ))}
+      <div className="flex  justify-between">
+        <div className="flex space-x-4 p-4">
+        <Skeleton width={50} height={30} />
+        <Skeleton width={50} height={30} />
+        </div>
+        <div className='mr-14'>
+        <Skeleton width={300} height={30} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/Skeletons/ttl.skeleton.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+export default function TtlSkeleton() {
+  // Define an array with unique keys
+  const skeletonRows = [{ id: 'row-1' }, { id: 'row-2' }, { id: 'row-3' }];
+
+  return (
+    <div className="p-4">
+      {/* Header Skeleton */}
+      <Skeleton height={30} width={80} />
+      <Skeleton height={30} width="40%" className="mt-6" />
+      <div className="p-6 border-b-2 bg-gray-100 mt-6">
+      {/* <Skeleton height={60} className="mt-6 " /> */}
+        <div className="flex px-6">
+            <Skeleton width={100} height={20} className='px-6 '/>
+            <Skeleton width={100} height={20} className=' px-6 ml-20' />
+            <Skeleton width={100} height={20} className=' px-6 ml-20' />
+            <Skeleton width={100} height={20} className='px-6 ml-20'/>
+            <Skeleton width={100} height={20} className='px-6 ml-28'/>
+        </div>
+      </div>
+      {/* Skeleton for Table Rows */}
+      {skeletonRows.map((row) => (
+        <div key={row.id} className="flex items-center mb-4">
+          {/* Name and Email Skeleton */}
+          <div className="flex-1">
+            <Skeleton height={20} width="85%" className="mt-2" />
+          </div>
+
+          {/* Action Buttons Skeleton */}
+          <div className="flex space-x-4 mr-16">
+            <Skeleton width={30} height={30} borderRadius="50%" />
+            <Skeleton width={30} height={30} borderRadius="50%"/>
+            <Skeleton width={30} height={30} borderRadius="50%" />
+          </div>
+        </div>
+      ))}
+      <div className="flex  justify-between">
+        <div className="flex space-x-4 p-4">
+        <Skeleton width={50} height={30} />
+        <Skeleton width={50} height={30} />
+        </div>
+        <div className='mr-14'>
+        <Skeleton width={300} height={30} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/assets/logoAnimation.json

@@ -0,0 +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

@@ -11,6 +11,8 @@ import useDocumentTitle from '../hook/useDocumentTitle';
 import { useLazyQuery, useMutation } from '@apollo/client';
 import { ADD_EVENT, GET_EVENTS } from '../Mutations/event';
 import moment from 'moment';
+import CalendarSkeleton from '../Skeletons/Calender.skeleton'
+
 /* istanbul ignore next */
 
 const Calendar = () => {
@@ -25,6 +27,7 @@ const Calendar = () => {
     timeToFinish: '',
   });
   const [data, setData] = useState<EventInput[]>([]);
+  const [loading, setLoading] = useState(true);
   const [getEvents] = useLazyQuery(GET_EVENTS);
   const [createEvent] = useMutation(ADD_EVENT);
   useEffect(() => {
@@ -48,6 +51,8 @@ const Calendar = () => {
       } catch (error) {
         console.log({ eventsError: data });
         // toast.error(error?.message || 'Something went wrong');
+      }finally {
+        setLoading(false);
       }
     };
     fetchData();
@@ -257,12 +262,16 @@ const Calendar = () => {
         >
           {t('Add event')}
         </button>
+        {loading ? (
+          <CalendarSkeleton />
+        ) : (
         <FullCalendar
           eventContent={renderEvent}
           events={data}
           plugins={[dayGridPlugin, interactionPlugin]}
           initialView="dayGridMonth"
         />
+        )}
       </div>
     </>
   );

src/components/Organizations.tsx

@@ -13,6 +13,7 @@ import { toast } from 'react-toastify';
 import { Icon } from '@iconify/react';
 
 import DataTable from '../components/DataTable';
+import OrgSkeleton from '../Skeletons/Organization.skeleton';
 
 export interface Admin {
   id: string;
@@ -564,12 +565,15 @@ const Organizations = () => {
           </div>
         </div>
         <div className="">
+        {getLoading ? (
+          <OrgSkeleton/>
+        ) : (
           <DataTable
             columns={organizationColumns}
             data={organizationData ? (organizationData as [any]) : []}
             title={t('Organizations list')}
-            loading={getLoading}
           />
+        )}
         </div>
       </div>
     </div>

src/components/Skeleton.tsx

@@ -1,28 +1,11 @@
 import React from 'react';
+import Lottie from 'lottie-react';
+import animatedLogo from '../assets/logoAnimation.json';
 
 export default function Skeleton() {
   return (
-    <main className="page-main font-serif">
-      <div className="border-2 p-2 md:p-4 min-h-screen min-w-full flex flex-col bg-white">
-        <div className="flex flex-row justify-between">
-          <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" />
-          <div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse rounded-md w-[50%] md:mx-2" />
-          <div className="w-12 bg-gray-300 dark:bg-gray-600 animate-pulse h-12 rounded-full ml-auto mr-2 md:mx-2" />
-          <div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse rounded-md w-[10%]" />
-
-          <div className="bg-gray-300 dark:bg-gray-600 h-12 animate-pulse hidden md:block rounded-md w-[20%] ml-2" />
-        </div>
-        <div className="flex grow my-3 h-full flex-row justify-center">
-          <div className="flex flex-grow bg-gray-300 dark:bg-gray-600 rounded-xl animate-pulse md:mr-2" />
-          <div className="md:flex flex-grow hidden bg-gray-300 dark:bg-gray-600 rounded-xl animate-pulse ml-2" />
-        </div>
-        <div className="h-[7vh] my-4 bg-gray-300 dark:bg-gray-600 animate-pulse w-[50%] rounded-md mx-auto" />
-        <div className="mt-auto w-full animate-pulse  h-[8vh] flex justify-between">
-          <div className="w-full md:w-[33%]  bg-gray-300 dark:bg-gray-600 rounded-md" />
-          <div className="hidden md:flex w-[33%]  bg-gray-300 dark:bg-gray-600 rounded-md" />
-          <div className="hidden md:flex w-[33%]  bg-gray-300 dark:bg-gray-600 rounded-md" />
-        </div>
-      </div>
-    </main>
+    <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">
+      <Lottie className="h-24" animationData={animatedLogo} />
+    </div>
   );
 }

src/components/loaders/logoLoader.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Lottie from 'lottie-react';
+import animatedLogo from '../../assets/logoAnimation.json';
+
+export default function LogoLoader() {
+  return (
+    <div className="h-screen w-screen flex justify-center items-center">
+      <Lottie className="h-24" animationData={animatedLogo} />
+    </div>
+  );
+}

src/containers/DashRoutes.tsx

@@ -91,7 +91,7 @@ function DashRoutes() {
         <Sidebar toggle={toggleNav} style="" />
       </MenuProvider>
       <main className=" px-4 md:px-8 py-4 md:py-8 w-[100%] bg-light-bg dark:bg-dark-frame-bg"> 
-        <Suspense fallback={<Square />}>
+        {/* <Suspense fallback={<Square />}> */}
           <Routes>
             <Route path="/dashboard" element={<Dashboard />} />
             <Route path="/trainees" element={<AdminTraineeDashboard />} />
@@ -164,7 +164,7 @@ function DashRoutes() {
             <Route path="/cards" element={<CoordinatorCards />} />
             <Route path="/ttl-trainees" element={<TtlTraineeDashboard />} />
           </Routes>
-        </Suspense>
+        {/* </Suspense> */}
       </main>
     </PrivateRoute>
   );