Skip to content

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

Open
wingo-blue wants to merge 6 commits into
SolFoundry:mainfrom
wingo-blue:feat/loading-skeleton-animations
Open

feat: add loading skeleton animations for all pages (#827)#1392
wingo-blue wants to merge 6 commits into
SolFoundry:mainfrom
wingo-blue:feat/loading-skeleton-animations

Conversation

@wingo-blue

Copy link
Copy Markdown

Summary

Add comprehensive loading skeleton animation system across all data-loading states.

New files

  • Skeleton.tsx ??Base skeleton primitives (SkeletonBox, SkeletonLine, SkeletonAvatar, SkeletonBadge) + pre-built skeletons for bounty cards, leaderboard, profile sections, podium
  • animations.ts ??Shared framer-motion animation variants (skeletonPulse, fadeIn, staggerContainer, etc.)
  • utils.ts ??Utility functions (cn, formatCurrency, timeLeft, timeAgo, LANG_COLORS, etc.)

Modified

  • BountyGrid.tsx ??Replaced basic gradient-bar loading with SkeletonBountyGrid matching BountyCard shape
  • LeaderboardPage.tsx ??Replaced spinner with SkeletonPodium + SkeletonLeaderboardTable
  • ProfileDashboard.tsx ??Replaced text 'Loading...' with SkeletonProfileSection

Key Features

  • Shimmer animation via existing �nimate-shimmer Tailwind config
  • Skeletons precisely match real content shapes (card layout, table rows, profile sections, podium)
  • Framer-motion mounted for smooth appearance
  • Drop-in replacements ??existing loading states simply swap the child component
  • No new dependencies ??uses existing framer-motion and Tailwind

Closes #827

Wallet: A6YMFucCab3KvqLxHAtaUFxFUReSTPUg4dTxn1kQy7t

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🏭 Bounty T1: Loading Skeleton Animations

1 participant