From 24a647a815d54c8925bc2543849d32bb5a1d0f85 Mon Sep 17 00:00:00 2001
From: zp6 <373669493@qq.com>
Date: Fri, 15 May 2026 23:59:15 +0800
Subject: [PATCH] Add frontend/components/ui/skeleton.tsx

---
 frontend/components/ui/skeleton.tsx | 59 +++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 frontend/components/ui/skeleton.tsx

diff --git a/frontend/components/ui/skeleton.tsx b/frontend/components/ui/skeleton.tsx
new file mode 100644
index 000000000..cd31382f1
--- /dev/null
+++ b/frontend/components/ui/skeleton.tsx
@@ -0,0 +1,59 @@
+import { cn } from '@/lib/utils'
+
+interface SkeletonProps {
+  className?: string
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div className={cn('animate-pulse rounded-md bg-gray-200 dark:bg-gray-700', className)} />
+  )
+}
+
+export function BountyCardSkeleton() {
+  return (
+    <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-4 space-y-3">
+      <Skeleton className="h-4 w-3/4" />
+      <Skeleton className="h-3 w-1/2" />
+      <div className="flex gap-2">
+        <Skeleton className="h-6 w-16 rounded-full" />
+        <Skeleton className="h-6 w-16 rounded-full" />
+      </div>
+      <div className="flex justify-between">
+        <Skeleton className="h-3 w-24" />
+        <Skeleton className="h-3 w-20" />
+      </div>
+    </div>
+  )
+}
+
+export function LeaderboardRowSkeleton() {
+  return (
+    <div className="flex items-center gap-4 py-3 px-4">
+      <Skeleton className="h-8 w-8 rounded-full" />
+      <Skeleton className="h-4 w-32" />
+      <div className="flex-1" />
+      <Skeleton className="h-4 w-16" />
+      <Skeleton className="h-4 w-20" />
+    </div>
+  )
+}
+
+export function ProfileSectionSkeleton() {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <Skeleton className="h-16 w-16 rounded-full" />
+        <div className="space-y-2">
+          <Skeleton className="h-5 w-32" />
+          <Skeleton className="h-3 w-24" />
+        </div>
+      </div>
+      <div className="grid grid-cols-3 gap-4">
+        <Skeleton className="h-20 rounded-lg" />
+        <Skeleton className="h-20 rounded-lg" />
+        <Skeleton className="h-20 rounded-lg" />
+      </div>
+    </div>
+  )
+}