diff --git a/frontend/src/components/skeleton/BountyCardSkeleton.tsx b/frontend/src/components/skeleton/BountyCardSkeleton.tsx new file mode 100644 index 000000000..07ebdc832 --- /dev/null +++ b/frontend/src/components/skeleton/BountyCardSkeleton.tsx @@ -0,0 +1,56 @@ +import React from 'react'; + +export function BountyCardSkeleton() { + return ( +
+ {/* Shimmer overlay */} +
+ + {/* Header: tier badge + status */} +
+
+
+
+
+
+
+ + {/* Org / repo line */} +
+
+
+
+ + {/* Title */} +
+
+
+
+ + {/* Skills */} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {/* Footer: reward + time */} +
+
+
+
+
+
+
+
+ ); +} diff --git a/frontend/src/components/skeleton/BountyDetailSkeleton.tsx b/frontend/src/components/skeleton/BountyDetailSkeleton.tsx new file mode 100644 index 000000000..7da562237 --- /dev/null +++ b/frontend/src/components/skeleton/BountyDetailSkeleton.tsx @@ -0,0 +1,113 @@ +import React from 'react'; + +export function BountyDetailSkeleton() { + return ( +
+ {/* Shimmer overlay via inner elements */} + + {/* Back link */} +
+
+
+
+ +
+ {/* Main content */} +
+ {/* Title + meta card */} +
+ {/* Org line */} +
+
+
+
+ + {/* Title */} +
+ + {/* Skills */} +
+
+
+
+
+
+
+
+
+
+ + {/* Description lines */} +
+
+
+
+
+
+
+ + {/* Issue link */} +
+
+
+
+
+ + {/* Submissions card */} +
+
+
+ {[1, 2].map((i) => ( +
+
+
+
+
+
+
+
+
+
+ ))} +
+
+
+ + {/* Sidebar */} +
+ {/* Reward card */} +
+
+
+
+
+
+
+
+ + {/* Details card */} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {/* Submit button placeholder */} +
+
+
+
+ ); +} diff --git a/frontend/src/components/skeleton/BountyGridSkeleton.tsx b/frontend/src/components/skeleton/BountyGridSkeleton.tsx new file mode 100644 index 000000000..4b9dbbe51 --- /dev/null +++ b/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 ( +
+ {Array.from({ length: count }).map((_, i) => ( + + ))} +
+ ); +} diff --git a/frontend/src/components/skeleton/index.ts b/frontend/src/components/skeleton/index.ts new file mode 100644 index 000000000..d827ed211 --- /dev/null +++ b/frontend/src/components/skeleton/index.ts @@ -0,0 +1,3 @@ +export { BountyCardSkeleton } from './BountyCardSkeleton'; +export { BountyGridSkeleton } from './BountyGridSkeleton'; +export { BountyDetailSkeleton } from './BountyDetailSkeleton';