fix(ui): polish follow-ups to likes leaderboard by serhalp · Pull Request #2681 · npmx-dev/npmx.dev

serhalp · 2026-05-07T01:34:29Z

🔗 Linked issue

N/A

🧭 Context

Follow-ups to #2459 (#2459 (review), #2459 (comment))

📚 Description

npmx.top.liked.demo.v3.mp4

make the medal badges circles
mute the likes count
fix style issues when no image is available
add rounded corners to 4-10 package logos
improve mobile likes podium layout
cache likes leaderboard API with ISR
move leaderboard fetch to SSR
add staggered entry animation
fill the 1-3 card banners
tighten the podium card body layout and likes count alignment

- Move leaderboard fetch to SSR data - Add staggered entry animation - Fill the 1-3 card banners - Tighten the podium card body layout and likes count alignment

vercel · 2026-05-07T01:34:34Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	May 9, 2026 0:59am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	May 9, 2026 0:59am
npmx-lunaria	Ignored		May 9, 2026 0:59am

coderabbitai · 2026-05-07T01:34:38Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 19f2e309-9eef-4336-8dde-422e464e4ba9

📥 Commits

Reviewing files that changed from the base of the PR and between 19720fb and e0caba1.

📒 Files selected for processing (1)

app/pages/leaderboard/likes.vue

🚧 Files skipped from review as they are similar to previous changes (1)

app/pages/leaderboard/likes.vue

📝 Walkthrough

Summary by CodeRabbit

Release Notes

New Features
- Smooth staggered entrance animations for leaderboard rows and podium items with responsive layout adjustments.
Improvements
- Clearer empty-leaderboard presentation when no entries are available.
- Updated caching/refresh behaviour for leaderboard data to reduce stale content.
- Accessibility refinements: reduced-motion preference respected and improved focus-visible styling for leaderboard items.

Walkthrough

The leaderboard likes page refactors client fetch to return a defaulted data array, removes prior request-state UI, adds mount-triggered staggered entry animations and responsive podium helpers, switches row logos to homepage logos with icon fallback, introduces scoped animation CSS with reduced-motion respect, and enables ISR (900s) for the likes API route.

Changes

Leaderboard Likes UI Refactor

Layer / File(s)	Summary
Data Fetching and Animation State `app/pages/leaderboard/likes.vue`	`useFetch` destructures only `data` with `default: () => []`; previous request-state variables removed; `shouldAnimateEntries` is added and set true in `onMounted`.
Animation and Layout Helpers `app/pages/leaderboard/likes.vue`	`getEntryAnimationStyle(index)` computes per-entry animationDelay; `getResponsivePodiumItemClass(rank)` returns responsive podium layout classes.
Conditional Template Rendering `app/pages/leaderboard/likes.vue`	Template now shows an "unavailable" `BaseCard` when `leaderboardEntries.length === 0`; otherwise renders the leaderboard.
Podium Entries (Mobile) `app/pages/leaderboard/likes.vue`	Mobile top-3 podium entries apply `likes-leaderboard-entry-motion` class and per-entry inline animation styles; use responsive podium item classes and preview image rendering.
Podium Entries (Desktop) `app/pages/leaderboard/likes.vue`	Desktop top-3 podium entries mirror mobile behavior with motion classes/styles and updated link/card classes.
Remaining Entries Rendering `app/pages/leaderboard/likes.vue`	Rank 4+ rows use staggered animation delays, render logos via `homepageLogoUrl` with bound sizes and icon fallback, update likes label typography and add `focus-visible:outline-none` on links.
CSS Animations and API Caching `app/pages/leaderboard/likes.vue`, `nuxt.config.ts`	Add scoped `likes-leaderboard-pop-in` keyframes and focus-visible styles with a `prefers-reduced-motion: reduce` override; update `/api/leaderboard/likes` routeRule to `isr: 900`.

Possibly related PRs

npmx-dev/npmx.dev#2459: Prior changes to the likes leaderboard component and related routing/caching adjustments touching the same files.

Suggested reviewers

graphieros
alexdln
gameroman

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the primary change—polish follow-ups to the likes leaderboard—and aligns with the PR objectives covering UI improvements, animations, and caching changes.
Description check	✅ Passed	The description is detailed and directly related to the changeset, covering UI improvements, animations, fetching/caching optimisations, and image handling as implemented in the files modified.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/likes-leaderboard-follow-ups

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-05-07T01:37:57Z

Codecov Report

❌ Patch coverage is 85.18519% with 12 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/leaderboard/likes.vue	85.18%	12 Missing ⚠️

📢 Thoughts on this report? Let us know!

graphieros

Looks nice! 🌿

graphieros · 2026-05-09T05:18:41Z

+}
+
+.likes-leaderboard-entry-motion {
+  animation: likes-leaderboard-pop-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;


I tried playing with different cubic-bezier values, and found something like (0.16, 0.3, 0.3, 1) made it slightly smoother. But it is shippable as is:)

serhalp added 7 commits May 3, 2026 18:57

fix: make the medal badges circles

777b106

fix: mute the likes count

07af261

fix: fix style issues when no image is available

d3212f3

fix: add rounded corners to 4-10 package logos

5b5e4c9

fix: improve mobile likes podium layout

a70f897

fix: cache likes leaderboard API with ISR

5ccc6b5

fix: polish likes leaderboard loading and card layout

1ca54b1

- Move leaderboard fetch to SSR data - Add staggered entry animation - Fill the 1-3 card banners - Tighten the podium card body layout and likes count alignment

Merge branch 'main' into fix/likes-leaderboard-follow-ups

5a52d9b

vercel Bot deployed to Preview – docs.npmx.dev May 7, 2026 01:49 View deployment

vercel Bot deployed to Preview – npmx.dev May 7, 2026 01:49 View deployment

serhalp added 2 commits May 6, 2026 21:56

fix: remove load=lazy from leaderboard images

68df1f8

fix: try a different entry animation

8aaa984

vercel Bot deployed to Preview – npmx.dev May 7, 2026 01:58 View deployment

fix: try a less subtle entry animation

ef94bb1

vercel Bot deployed to Preview – npmx.dev May 7, 2026 11:09 View deployment

Merge branch 'main' into fix/likes-leaderboard-follow-ups

2264601

vercel Bot deployed to Preview – docs.npmx.dev May 8, 2026 01:38 View deployment

vercel Bot deployed to Preview – npmx.dev May 8, 2026 01:39 View deployment

serhalp added 2 commits May 7, 2026 21:57

fix: defer entry animations until initial render

b216bbb

fix: improve keyboard focus styles for podium cards

632c29c

vercel Bot deployed to Preview – npmx.dev May 8, 2026 02:00 View deployment

Merge branch 'main' into fix/likes-leaderboard-follow-ups

19720fb

vercel Bot deployed to Preview – docs.npmx.dev May 9, 2026 00:40 View deployment

vercel Bot deployed to Preview – npmx.dev May 9, 2026 00:41 View deployment

serhalp marked this pull request as ready for review May 9, 2026 01:08

serhalp requested a review from graphieros May 9, 2026 01:15

graphieros approved these changes May 9, 2026

View reviewed changes

serhalp commented May 9, 2026

View reviewed changes

Comment thread app/pages/leaderboard/likes.vue Outdated

Apply suggestion from @graphieros

e0caba1

serhalp enabled auto-merge May 9, 2026 12:56

vercel Bot deployed to Preview – npmx.dev May 9, 2026 12:59 View deployment

serhalp added this pull request to the merge queue May 9, 2026

Merged via the queue into main with commit 9f48533 May 9, 2026
26 checks passed

serhalp deleted the fix/likes-leaderboard-follow-ups branch May 9, 2026 13:05

github-actions Bot mentioned this pull request May 9, 2026

chore: release v0.11.0 #2670

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(ui): polish follow-ups to likes leaderboard#2681

fix(ui): polish follow-ups to likes leaderboard#2681
serhalp merged 16 commits intomainfrom
fix/likes-leaderboard-follow-ups

serhalp commented May 7, 2026 •

edited

Loading

Uh oh!

vercel Bot commented May 7, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 7, 2026 •

edited

Loading

Summary by CodeRabbit

Release Notes

Walkthrough

Changes

Possibly related PRs

Suggested reviewers

Uh oh!

codecov Bot commented May 7, 2026 •

edited

Loading

Uh oh!

graphieros left a comment •

edited

Loading

Uh oh!

graphieros May 9, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

serhalp commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercel Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Release Notes

Walkthrough

Changes

Possibly related PRs

Suggested reviewers

Uh oh!

codecov Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

graphieros left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

graphieros May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

serhalp commented May 7, 2026 •

edited

Loading

vercel Bot commented May 7, 2026 •

edited

Loading

coderabbitai Bot commented May 7, 2026 •

edited

Loading

codecov Bot commented May 7, 2026 •

edited

Loading

graphieros left a comment •

edited

Loading

graphieros May 9, 2026 •

edited

Loading