feat: Loading Skeleton Animations - Bounty #827

frontend/src/components/skeleton/BountyCardSkeleton.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+export function BountyCardSkeleton() {
+  return (
+    <div className="relative rounded-xl border border-border bg-forge-900 p-5 overflow-hidden animate-pulse">
+      {/* Shimmer overlay */}
+      <div className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-forge-700/20 to-transparent" />
+
+      {/* Header: tier badge + status */}
+      <div className="flex items-center justify-between mb-3">
+        <div className="h-5 w-10 rounded-full bg-forge-800" />
+        <div className="flex items-center gap-1.5">
+          <div className="w-2 h-2 rounded-full bg-forge-800" />
+          <div className="h-3 w-12 rounded bg-forge-800" />
+        </div>
+      </div>
+
+      {/* Org / repo line */}
+      <div className="flex items-center gap-2 mb-3">
+        <div className="w-4 h-4 rounded-full bg-forge-800" />
+        <div className="h-3 w-32 rounded bg-forge-800 font-mono" />
+      </div>
+
+      {/* Title */}
+      <div className="space-y-2 mb-4">
+        <div className="h-4 w-full rounded bg-forge-800" />
+        <div className="h-4 w-3/4 rounded bg-forge-800" />
+      </div>
+
+      {/* Skills */}
+      <div className="flex items-center gap-3 mb-4">
+        <div className="flex items-center gap-1.5">
+          <div className="w-2.5 h-2.5 rounded-full bg-forge-800" />
+          <div className="h-3 w-14 rounded bg-forge-800" />
+        </div>
+        <div className="flex items-center gap-1.5">
+          <div className="w-2.5 h-2.5 rounded-full bg-forge-800" />
+          <div className="h-3 w-10 rounded bg-forge-800" />
+        </div>
+        <div className="flex items-center gap-1.5">
+          <div className="w-2.5 h-2.5 rounded-full bg-forge-800" />
+          <div className="h-3 w-12 rounded bg-forge-800" />
+        </div>
+      </div>
+
+      {/* Footer: reward + time */}
+      <div className="flex items-center justify-between pt-3 border-t border-border">
+        <div className="h-5 w-24 rounded bg-forge-800" />
+        <div className="flex items-center gap-1.5">
+          <div className="w-3.5 h-3.5 rounded bg-forge-800" />
+          <div className="h-3 w-16 rounded bg-forge-800" />
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/skeleton/BountyDetailSkeleton.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+
+export function BountyDetailSkeleton() {
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8 animate-pulse">
+      {/* Shimmer overlay via inner elements */}
+
+      {/* Back link */}
+      <div className="flex items-center gap-2 mb-6">
+        <div className="w-4 h-4 rounded bg-forge-800" />
+        <div className="h-3 w-24 rounded bg-forge-800" />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Main content */}
+        <div className="lg:col-span-2 space-y-6">
+          {/* Title + meta card */}
+          <div className="rounded-xl border border-border bg-forge-900 p-6">
+            {/* Org line */}
+            <div className="flex items-center gap-2 mb-3">
+              <div className="w-4 h-4 rounded-full bg-forge-800" />
+              <div className="h-3 w-40 rounded bg-forge-800 font-mono" />
+            </div>
+
+            {/* Title */}
+            <div className="h-7 w-3/4 rounded bg-forge-800 mb-4" />
+
+            {/* Skills */}
+            <div className="flex items-center gap-3 mb-4">
+              <div className="flex items-center gap-1.5">
+                <div className="w-2.5 h-2.5 rounded-full bg-forge-800" />
+                <div className="h-3 w-16 rounded bg-forge-800" />
+              </div>
+              <div className="flex items-center gap-1.5">
+                <div className="w-2.5 h-2.5 rounded-full bg-forge-800" />
+                <div className="h-3 w-12 rounded bg-forge-800" />
+              </div>
+            </div>
+
+            {/* Description lines */}
+            <div className="space-y-2">
+              <div className="h-3.5 w-full rounded bg-forge-800" />
+              <div className="h-3.5 w-5/6 rounded bg-forge-800" />
+              <div className="h-3.5 w-4/6 rounded bg-forge-800" />
+              <div className="h-3.5 w-full rounded bg-forge-800" />
+              <div className="h-3.5 w-3/4 rounded bg-forge-800" />
+            </div>
+
+            {/* Issue link */}
+            <div className="flex items-center gap-1.5 mt-4">
+              <div className="w-4 h-4 rounded bg-forge-800" />
+              <div className="h-3 w-36 rounded bg-forge-800" />
+            </div>
+          </div>
+
+          {/* Submissions card */}
+          <div className="rounded-xl border border-border bg-forge-900 p-6">
+            <div className="h-5 w-28 rounded bg-forge-800 mb-4" />
+            <div className="space-y-3">
+              {[1, 2].map((i) => (
+                <div key={i} className="rounded-lg border border-border bg-forge-800/40 p-4">
+                  <div className="flex items-center gap-3 mb-3">
+                    <div className="w-8 h-8 rounded-full bg-forge-800" />
+                    <div className="h-4 w-24 rounded bg-forge-800" />
+                  </div>
+                  <div className="space-y-1.5">
+                    <div className="h-3 w-full rounded bg-forge-800" />
+                    <div className="h-3 w-2/3 rounded bg-forge-800" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Reward card */}
+          <div className="rounded-xl border border-border bg-forge-900 p-5">
+            <div className="h-3 w-14 rounded bg-forge-800 mb-2" />
+            <div className="h-8 w-32 rounded bg-forge-800 mb-4" />
+            <div className="space-y-2">
+              <div className="h-3 w-full rounded bg-forge-800" />
+              <div className="h-3 w-3/4 rounded bg-forge-800" />
+            </div>
+          </div>
+
+          {/* Details card */}
+          <div className="rounded-xl border border-border bg-forge-900 p-5">
+            <div className="h-4 w-20 rounded bg-forge-800 mb-4" />
+            <div className="space-y-3">
+              <div className="flex justify-between">
+                <div className="h-3 w-16 rounded bg-forge-800" />
+                <div className="h-3 w-20 rounded bg-forge-800" />
+              </div>
+              <div className="flex justify-between">
+                <div className="h-3 w-12 rounded bg-forge-800" />
+                <div className="h-3 w-16 rounded bg-forge-800" />
+              </div>
+              <div className="flex justify-between">
+                <div className="h-3 w-14 rounded bg-forge-800" />
+                <div className="h-3 w-10 rounded bg-forge-800" />
+              </div>
+            </div>
+          </div>
+
+          {/* Submit button placeholder */}
+          <div className="h-10 w-full rounded-lg bg-forge-800" />
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/skeleton/BountyGridSkeleton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { BountyCardSkeleton } from './BountyCardSkeleton';
+
+interface BountyGridSkeletonProps {
+  count?: number;
+}
+
+export function BountyGridSkeleton({ count = 6 }: BountyGridSkeletonProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <BountyCardSkeleton key={i} />
+      ))}
+    </div>
+  );
+}

frontend/src/components/skeleton/index.ts

@@ -0,0 +1,3 @@
+export { BountyCardSkeleton } from './BountyCardSkeleton';
+export { BountyGridSkeleton } from './BountyGridSkeleton';
+export { BountyDetailSkeleton } from './BountyDetailSkeleton';