refactor: consolidate loading skeletons into shared ui/loading components - #236
Conversation
|
Someone is attempting to deploy a commit to the Threadflow Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Review limit reached
More reviews will be available in 13 minutes and 36 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughSkeleton loading components are consolidated from scattered local definitions into a new ChangesSkeleton Component Consolidation
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@Shadow-MMN Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/ui/loading/bounty-card-skeleton.tsx`:
- Around line 4-35: In BountyCardSkeleton, remove the hardcoded bg-gray-800
class from every Skeleton usage so the Skeleton component can rely on its base
theme-aware styling (bg-accent); search for Skeleton instances within the
BountyCardSkeleton function and delete any "bg-gray-800" tokens in their
className strings, preserving the other layout classes (e.g., "h-5 w-14",
"rounded-full", "w-full", etc.) so spacing and sizing remain unchanged.
In `@components/ui/loading/leaderboard-row-skeleton.tsx`:
- Around line 63-67: The wrapper div in the skeleton component adds artificial
vertical spacing via the "space-y-4" class which differs from the real
LeaderboardTable that uses border-b on each row; remove the "space-y-4" class
(i.e., stop applying inter-row spacing on the container) so that each
LeaderboardRowSkeleton (which already has border-b border-border/60) lines up
with TableRow spacing in LeaderboardTable and avoids layout shift when real data
loads.
- Around line 35-70: The header Skeleton elements in LeaderboardTableSkeleton
are hardcoding a dark background via the "bg-gray-800" utility on multiple
Skeleton usages; remove that hardcoded class from each header Skeleton (the ones
inside the top .flex block) so they use the component's theme-aware default
styling (or replace with the correct theme token if your Skeleton requires one),
ensuring consistency with LeaderboardRowSkeleton and theme switching; update the
Skeleton className props in the LeaderboardTableSkeleton function (the Skeleton
instances in the header) to omit "bg-gray-800".
- Around line 3-32: In LeaderboardRowSkeleton, remove the hardcoded
"bg-gray-800" Tailwind class from every Skeleton usage so the Skeleton
components can fall back to their theme-aware default (e.g., bg-accent); locate
the Skeleton elements inside the LeaderboardRowSkeleton function and delete any
occurrence of "bg-gray-800" in their className strings (ensure you don’t
accidentally remove other layout classes like h-*, w-*, rounded-*, ml-auto,
etc.).
- Around line 35-62: The LeaderboardTableSkeleton component uses invalid
responsive table-cell classes on divs; update the three div elements currently
containing "md:table-cell", "sm:table-cell", and "lg:table-cell" to use the
correct block visibility pattern (e.g., replace "hidden md:table-cell" with
"hidden md:block", "hidden sm:table-cell" with "hidden sm:block", and "hidden
lg:table-cell" with "hidden lg:block") while preserving the other utility
classes (width, text-right, font-bold, py-3, etc.) so the skeleton visibility
behaves correctly across breakpoints.
In `@components/ui/loading/wallet-page-skeleton.tsx`:
- Around line 3-22: The Skeleton components in WalletPageSkeleton hardcode
"bg-gray-800" which overrides the theme-aware base class; edit the
WalletPageSkeleton function and remove "bg-gray-800" from every Skeleton
className while preserving other sizing/spacing classes (e.g., "h-9 w-32",
"rounded-2xl", etc.) so the Skeleton component's default/theme class (like
bg-accent) can apply.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 9e27459b-a34d-42f2-8312-22d1de216042
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (12)
app/bounty/page.tsxapp/wallet/page.tsxcomponents/bounty-detail/bounty-detail-client.tsxcomponents/bounty/bounty-card-skeleton.tsxcomponents/bounty/bounty-grid.tsxcomponents/bounty/bounty-list.tsxcomponents/leaderboard/leaderboard-table.tsxcomponents/ui/loading/bounty-card-skeleton.tsxcomponents/ui/loading/bounty-detail-skeleton.tsxcomponents/ui/loading/index.tscomponents/ui/loading/leaderboard-row-skeleton.tsxcomponents/ui/loading/wallet-page-skeleton.tsx
💤 Files with no reviewable changes (1)
- components/bounty/bounty-card-skeleton.tsx
27a0e53 to
0dff363
Compare
Benjtalkshow
left a comment
Benjtalkshow
left a comment
There was a problem hiding this comment.
Clean consolidation. All four pages now pull skeletons from components/ui/loading/, old files are deleted, and the barrel export keeps imports tidy. The leaderboard-table reformatting from 4-space to 2-space is welcome since it brings the file in line with the rest of the codebase.
Merging this in. Thanks.
2 participants
Summary
Standardize all loading skeletons across the app by extracting reusable loading components into a shared
components/ui/loadingdirectory.Changes
components/ui/loading/with shared skeleton componentsBountyCardSkeleton&BountyListSkeleton- extracted fromcomponents/bounty/BountyDetailSkeleton- renamed frombounty-detail-bounty-detail-skeleton.tsxLeaderboardRowSkeleton&LeaderboardTableSkeleton- extracted inline markupWalletPageSkeleton- extracted fromapp/wallet/page.tsxCloses #212
Summary by CodeRabbit