Merge pull request #580 from Utsavladia/leaderboard-skeleton

Added skeleton loader for leaderboard
VaibhavArora314 · Aug 8, 2024 · daae973 · daae973
2 parents 3b664f2 + 9251184
commit daae973
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 2 deletions.
diff --git a/frontend/src/components/LeaderboardSkeleton.tsx 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
@@ -1,10 +1,10 @@
 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';
 import useLeaderboard from '../hooks/useLeadearboard';
 import bgHero from "../assets/bgHero.png";
+import LeaderboardSkeleton from '../components/LeaderboardSkeleton';
 
 const LeaderBoard = () => {
   const { loading, leaderboard } = useLeaderboard();
@@ -24,7 +24,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">