feat: add loading skeleton animations for all pages (Bounty #827)

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>
+  )
+}