Merge pull request #246 from KunjalVanra/feature/skeleton-loading-ui

feat: add skeleton loading UI for tracker data

Author: mehul-m-prajapati

src/pages/Tracker/Tracker.tsx

@@ -21,6 +21,7 @@ import {
   TablePagination,
   Link,
   Alert,
+  Skeleton,
   Tabs,
   Tab,
   Select,
@@ -297,43 +298,72 @@ const Home: React.FC = () => {
         </Alert>
       )}
 
-      {loading ? (
-  <Box sx={{ maxHeight: "400px", overflowY: "auto" }}>
-    <TableContainer component={Paper}>
-      <Table size="small">
-        <TableHead>
-          <TableRow>
-            <TableCell>Title</TableCell>
-            <TableCell align="center">Repository</TableCell>
-            <TableCell align="center">State</TableCell>
-            <TableCell>Created</TableCell>
+  {loading ? (
+  <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>
-        </TableHead>
-
-        <TableBody>
-          {[...Array(5)].map((_, index) => (
-            <TableRow key={index}>
-              <TableCell>
-                <Skeleton variant="text" width="80%" height={30} />
-              </TableCell>
-
-              <TableCell align="center">
-                <Skeleton variant="text" width="60%" height={30} />
-              </TableCell>
-
-              <TableCell align="center">
-                <Skeleton variant="rounded" width={70} height={25} />
-              </TableCell>
-
-              <TableCell>
-                <Skeleton variant="text" width="70%" height={30} />
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  </Box>
+        ))}
+      </TableBody>
+    </Table>
+  </TableContainer>
 ) : !authError && !dataError && currentFilteredData.length === 0 ? (
   <Paper
     elevation={1}
@@ -352,7 +382,6 @@ const Home: React.FC = () => {
     </Typography>
   </Paper>
 ) : (
-    
   <Box sx={{ maxHeight: "400px", overflowY: "auto" }}>
 
           <TableContainer component={Paper}>