From d8cfba598297f025c09f8196bdb1e98db28fe940 Mon Sep 17 00:00:00 2001
From: KunjalVanra <vanrakunjal@gmail.com>
Date: Fri, 15 May 2026 11:49:23 +0530
Subject: [PATCH] feat: add skeleton loading UI for tracker data

---
 src/pages/Tracker/Tracker.tsx | 71 +++++++++++++++++++++++++++++++++--
 1 file changed, 67 insertions(+), 4 deletions(-)

diff --git a/src/pages/Tracker/Tracker.tsx b/src/pages/Tracker/Tracker.tsx
index 2bd4d30..9614683 100644
--- a/src/pages/Tracker/Tracker.tsx
+++ b/src/pages/Tracker/Tracker.tsx
@@ -22,6 +22,7 @@ import {
   Link,
   CircularProgress,
   Alert,
+  Skeleton,
   Tabs,
   Tab,
   Select,
@@ -279,10 +280,72 @@ const Home: React.FC = () => {
       )}
 
       {loading ? (
-        <Box display="flex" justifyContent="center" my={4}>
-          <CircularProgress />
-        </Box>
-      ) : (
+  <TableContainer component={Paper}>
+    <Table size="small">
+      <TableHead>
+        <TableRow>
+          <TableCell>Title</TableCell>
+          <TableCell align="center">Repository</TableCell>
+          <TableCell align="center">State</TableCell>
+          <TableCell>Created</TableCell>
+        </TableRow>
+      </TableHead>
+
+      <TableBody>
+        {[...Array(6)].map((_, index) => (
+          <TableRow key={index}>
+            <TableCell>
+              <Box display="flex" alignItems="center" gap={1}>
+                <Skeleton
+                  variant="circular"
+                  width={20}
+                  height={20}
+                  animation="wave"
+                />
+
+                <Skeleton
+                  variant="text"
+                  width="80%"
+                  height={30}
+                  animation="wave"
+                />
+              </Box>
+            </TableCell>
+
+            <TableCell align="center">
+              <Skeleton
+                variant="text"
+                width={100}
+                height={25}
+                animation="wave"
+                sx={{ mx: "auto" }}
+              />
+            </TableCell>
+
+            <TableCell align="center">
+              <Skeleton
+                variant="rounded"
+                width={70}
+                height={25}
+                animation="wave"
+                sx={{ mx: "auto" }}
+              />
+            </TableCell>
+
+            <TableCell>
+              <Skeleton
+                variant="text"
+                width={90}
+                height={25}
+                animation="wave"
+              />
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  </TableContainer>
+) : (
         <Box sx={{ maxHeight: "400px", overflowY: "auto" }}>
 
           <TableContainer component={Paper}>