From e191c00b58d78b7e5235b9dbbe80b08f58712ee7 Mon Sep 17 00:00:00 2001
From: Utsavladia <utsavladia@gmail.com>
Date: Thu, 8 Aug 2024 14:35:29 +0530
Subject: [PATCH] Added skeleton loader for leaderboard

---
 .../src/components/LeaderboardSkeleton.tsx    | 59 +++++++++++++++++++
 frontend/src/pages/LeaderBoard.tsx            |  3 +-
 2 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/LeaderboardSkeleton.tsx

diff --git a/frontend/src/components/LeaderboardSkeleton.tsx b/frontend/src/components/LeaderboardSkeleton.tsx
new file mode 100644
index 00000000..db666b7b
--- /dev/null
+++ b/frontend/src/components/LeaderboardSkeleton.tsx
@@ -0,0 +1,59 @@
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+const LeaderboardSkeleton = () => {
+  const skeletonArray = Array(5).fill(0); // Adjust the number of skeleton rows as needed
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full divide-y divide-gray-200">
+        <thead className="text-center text-sm font-medium text-[#000435]  bg-white dark:text-white dark:bg-[#5f67de] border-b-2 border-sky-600">
+          <tr>
+            <th scope="col" className="px-2 py-3 sm:px-6 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider">
+              <Skeleton width={60} height={20} className=" rounded dark:bg-white" />
+            </th>
+            <th scope="col" className="px-2 py-3 sm:px-6 text-[#5f67de] bg-white  dark:text-white dark:bg-[#000435] uppercase tracking-wider">
+              <Skeleton width={80} height={20} className=" rounded dark:bg-white" />
+            </th>
+            <th scope="col" className="px-2 py-3 sm:px-6 mx-12 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider">
+              <Skeleton width={120} height={20} className=" rounded dark:bg-white" />
+            </th>
+            <th scope="col" className="px-2 py-3 sm:px-6 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider">
+              <Skeleton width={60} height={20} className=" rounded dark:bg-white" />
+            </th>
+            <th scope="col" className="px-2 py-3 sm:px-6 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider">
+              <Skeleton width={60} height={20} className=" rounded dark:bg-white" />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {skeletonArray.map((_, index) => (
+            <tr key={index} className="text-center text-[#000435] dark:text-gray-50 border-b-2 border-sky-900">
+              <td className="px-2 py-4 sm:px-6">
+                <div className="flex flex-col items-center">
+                  <Skeleton width={40} height={40} circle={true} className=" rounded-full dark:bg-white" />
+                </div>
+              </td>
+              <td className="px-2 py-4 sm:px-6">
+                <div className="flex flex-col items-center">
+                  <Skeleton width={40} height={40} circle={true} className=" rounded-full dark:bg-white" />
+                </div>
+              </td>
+              <td className="px-2 py-4 sm:px-6">
+                <Skeleton width={120} height={20} className=" rounded dark:bg-white" />
+              </td>
+              <td className="px-2 py-4 sm:px-6">
+                <Skeleton width={60} height={20} className=" rounded dark:bg-white" />
+              </td>
+              <td className="px-2 py-4 sm:px-6">
+                <Skeleton width={60} height={20} className=" rounded dark:bg-white" />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default LeaderboardSkeleton;
diff --git a/frontend/src/pages/LeaderBoard.tsx b/frontend/src/pages/LeaderBoard.tsx
index e72b8d58..55c3d873 100644
--- a/frontend/src/pages/LeaderBoard.tsx
+++ b/frontend/src/pages/LeaderBoard.tsx
@@ -5,6 +5,7 @@ import { useRecoilValue } from 'recoil';
 import { userState } from '../store/atoms/auth';
 import useLeaderboard from '../hooks/useLeadearboard';
 import bgHero from "../assets/bgHero.png";
+import LeaderboardSkeleton from '../components/LeaderboardSkeleton';
 
 const LeaderBoard = () => {
   const { loading, leaderboard } = useLeaderboard();
@@ -24,7 +25,7 @@ const LeaderBoard = () => {
         <div className="shadow-md text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] backdrop-blur-sm rounded-lg p-4 border-2 border-sky-500 lg:mx-52 md:mx-20 overflow-x-auto">
           {loading ? (
             <div className="flex justify-center">
-              <Loader />
+              <LeaderboardSkeleton />
             </div>
           ) : (
             <div className="overflow-x-auto">