fix: only show changelog skeleton when actually loading

[jibin7jose]

🔗 Linked issue

Resolves#3168

🧭 Context

Previously, the ChangelogSkeleton was conditionally rendered using v-if="!changelog && !changelogError". This caused the skeleton to remain visible permanently for packages that successfully returned from the API but simply didn't have any changelogs (like the fcy package).

This PR resolves the issue by extracting the pending state from usePackageChangelog and using it to conditionally render both the skeleton and the fallback error messages.

📚 Description

• Extracted pending: changelogPending state from usePackageChangelog.
• Updated the skeleton loader to only display while the fetch is still pending (v-if="changelogPending && !changelog && !changelogError").
• Wrapped the fallback/error messages in a <template v-else-if="!changelogPending"> so they don't render simultaneously while the skeleton is loading.

Testing:
Tested against packages with no changelogs (e.g., fcy) to confirm the skeleton gracefully hides and properly shows the "Sorry, this package does not publish changelogs..." text without overlap.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview	Aug 12, 2026 3:47am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Aug 12, 2026 3:47am
npmx-lunaria	Ignored		Aug 12, 2026 3:47am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 950b794d-2ea9-4f7f-b61e-1b091156bc55

📥 Commits

Reviewing files that changed from the base of the PR and between c9e8be9 and 3d0f02b.

📒 Files selected for processing (1)

• app/pages/package-changelog/[[org]]/[name].vue

---

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes
  • Improved changelog loading states to prevent premature error messages.
  • Loading placeholders now appear only while data is being fetched and no changelog or error is available.
  • Error feedback is displayed more consistently after loading completes.

Walkthrough

The package changelog page now uses changelogPending to control the loading skeleton and fallback messages. Fallback messages no longer appear while a changelog request is pending.

Changes

Package changelog loading

Layer / File(s)	Summary
Loading and fallback state handling app/pages/package-changelog/[[org]]/[name].vue	usePackageChangelog now exposes changelogPending. The loading skeleton requires a pending request with no changelog or error. Rate-limit, unavailable-version, and no-log messages render only after loading completes.

Suggested reviewers:wilcosp

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes address issue #3168 by hiding the skeleton after loading completes without changelog data.
Out of Scope Changes check	✅ Passed	The changes are limited to changelog loading, skeleton visibility, and fallback message rendering.
Description check	✅ Passed	The description clearly explains the changelog skeleton fix and matches the changeset.
Title check	✅ Passed	The title clearly and concisely describes the main change to show the changelog skeleton only during loading.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[codecov]

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/package-changelog/[[org]]/[name].vue	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[gameroman]

Please follow the PR template

[jibin7jose]

Updated the PR description to follow the template

[WilcoSp]

good fix, I've tested this with fcy, Vue and Nuxt and so far I can test it doesn't cause any unexpected changes in ux & behaviour

solved

[github-actions]

Thanks for your first contribution, @jibin7jose! ⭐

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.