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 1/3] 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">

From 0c31286c5ba78af2810696f88a3f0525b94094b4 Mon Sep 17 00:00:00 2001
From: Utsavladia <utsavladia@gmail.com>
Date: Thu, 8 Aug 2024 18:53:03 +0530
Subject: [PATCH 2/3] Fixed build error

---
 frontend/src/pages/LeaderBoard.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/pages/LeaderBoard.tsx b/frontend/src/pages/LeaderBoard.tsx
index 55c3d873..0da01fcc 100644
--- a/frontend/src/pages/LeaderBoard.tsx
+++ b/frontend/src/pages/LeaderBoard.tsx
@@ -1,5 +1,4 @@
 import { useNavigate } from 'react-router-dom';
-import Loader from '../components/Loader';
 import { GiTrophyCup } from "react-icons/gi";
 import { useRecoilValue } from 'recoil';
 import { userState } from '../store/atoms/auth';

From 92511848d2276391f7b46ccd5cd6fb230d7b749f Mon Sep 17 00:00:00 2001
From: Utsavladia <utsavladia@gmail.com>
Date: Thu, 8 Aug 2024 19:01:34 +0530
Subject: [PATCH 3/3] Added dependency

---
 frontend/package-lock.json | 9 +++++++++
 frontend/package.json      | 1 +
 2 files changed, 10 insertions(+)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index eb26e802..c7d02e95 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -31,6 +31,7 @@
         "react-fast-marquee": "^1.6.4",
         "react-hot-toast": "^2.4.1",
         "react-icons": "^5.2.1",
+        "react-loading-skeleton": "^3.4.0",
         "react-parallax-tilt": "^1.7.231",
         "react-responsive-modal": "^6.4.2",
         "react-router-dom": "^6.24.0",
@@ -4842,6 +4843,14 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.4.0.tgz",
+      "integrity": "sha512-1oJEBc9+wn7BbkQQk7YodlYEIjgeR+GrRjD+QXkVjwZN7LGIcAFHrx4NhT7UHGBxNY1+zax3c+Fo6XQM4R7CgA==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-parallax-tilt": {
       "version": "1.7.232",
       "resolved": "https://registry.npmjs.org/react-parallax-tilt/-/react-parallax-tilt-1.7.232.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 254593cf..dc060075 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,6 +33,7 @@
     "react-fast-marquee": "^1.6.4",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
+    "react-loading-skeleton": "^3.4.0",
     "react-parallax-tilt": "^1.7.231",
     "react-responsive-modal": "^6.4.2",
     "react-router-dom": "^6.24.0",