fix: show 404 page instead of blank on first visit to non-existent package

[2u841r]

When you visit a package URL that doesn't exist for the first time, Vercel serves an ISR fallback HTML while SSR runs in the background. On that first load the page was completely blank until you refreshed.

The cause was an await on useResolvedVersion in the component setup. On the client that suspends the component through Vue's Suspense, and since there is no fallback defined, nothing renders while the fetch is in flight.

The fix skips the await on the client. The server still awaits so the 404 can be thrown synchronously. On the client the existing watch already handles the error case and calls showError. Also added resolvedStatus === 'pending' to the skeleton condition so a loading state shows while the version fetch is running.

Fixes #1602

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	May 13, 2026 1:50am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	May 13, 2026 1:50am
npmx-lunaria	Ignored		May 13, 2026 1:50am

[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

Run ID: e2ebd6a6-5116-487f-a8dd-a8b12a30ac50

📥 Commits

Reviewing files that changed from the base of the PR and between f91f8c4 and 7ef6ae8.

📒 Files selected for processing (1)

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

---

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes
  • Improved loading state handling on package pages to prevent unintended blank rendering during initial load
  • Enhanced package version resolution and error handling for missing or invalid packages

Walkthrough

The package page component is updated to conditionally await version resolution only during server-side rendering. This allows missing packages to be detected and thrown synchronously on the server, whilst the client avoids awaiting to prevent Suspense-driven blank rendering. The loading skeleton visibility is extended to also show when resolved status is pending.

Changes

Package page version resolution and skeleton loading

Layer / File(s)	Summary
Server-side conditional version resolution app/pages/package/[[org]]/[name].vue	The component now calls useResolvedVersion(packageName, requestedVersion) once and conditionally awaits it only during import.meta.server. This ensures missing packages are detected and thrown synchronously on the server, whilst on the client it skips awaiting to prevent Suspense-driven blank rendering. The returned data and status are destructured into resolvedVersion and resolvedStatus.
Loading skeleton resolved status condition app/pages/package/[[org]]/[name].vue	The PackageSkeleton v-if condition is extended so that in the non-server-preserved path, the skeleton also renders when resolvedStatus is pending, in addition to the existing status pending check.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the primary fix: preventing blank pages when visiting non-existent packages and ensuring 404 pages display correctly on first visit.
Description check	✅ Passed	The description clearly explains the problem, root cause, and implemented solution, all directly related to the changeset modifications.
Linked Issues check	✅ Passed	The changes directly address issue #1602 by fixing the blank page problem when visiting non-existent packages through conditional awaiting and improved skeleton visibility.
Out of Scope Changes check	✅ Passed	All modifications to the package page component are directly scoped to fixing the 404 display issue and remain within the linked issue requirements.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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 and usage tips.}

[codecov]

Codecov Report

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

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

📢 Thoughts on this report? Let us know!

[gameroman]

This seems to work but looks like a workaround. Is there potentially a better solution?

[2u841r]

Making useResolvedVersion itself lazy would fix the suspension, but lazy composables don't block SSR so server-side 404 detection breaks.

A route middleware using $fetch would also work, but it can't share the cache with the page's useResolvedVersion call, so we'd end up fetching npm.antfu.dev twice on every package load.

Skipping the await on client keeps the server blocking for synchronous 404 detection while letting the client render without suspension. The existing watch already handles the client-side error case.

Not 100% confident this is the cleanest fix. Would defer to your judgment if you see something better.