feat: add table skeleton

dappforce · Jan 24, 2024 · 573ee54 · 573ee54
1 parent c299a9b
commit 573ee54
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/src/components/leaderboard/common/LeaderboardTable.tsx b/src/components/leaderboard/common/LeaderboardTable.tsx
@@ -62,6 +62,8 @@ export default function LeaderboardTable({ role, ...props }: LeaderboardTablePro
           <span>Staker</span>
           <span>Rewards this week</span>
         </div>
+        {slicedData.length === 0 &&
+          Array.from({ length: 3 }).map((_, idx) => <UserRowSkeleton key={idx} />)}
         {slicedData.map(row => (
           <UserRow role={role} key={row.rank} data={row} loading={!!loading} />
         ))}
@@ -79,6 +81,21 @@ export default function LeaderboardTable({ role, ...props }: LeaderboardTablePro
   )
 }
 
+function UserRowSkeleton() {
+  return (
+    <a className={clsx(styles.LeaderboardRow)}>
+      <SpanSkeleton style={{ width: '2ch' }} />
+      <div className='d-flex align-items-center' style={{ minWidth: 0 }}>
+        <Skeleton.Avatar size={32} className='mr-1' />
+        <SpanSkeleton />
+      </div>
+      <span style={{ textAlign: 'right' }}>
+        <SpanSkeleton />
+      </span>
+    </a>
+  )
+}
+
 function UserRow({
   data,
   loading,