From 7ef6ae823cfa7c70ed197f7cc6282b28fe88dbf4 Mon Sep 17 00:00:00 2001
From: Zubair Ibn Zamir <zizdjbd@gmail.com>
Date: Wed, 13 May 2026 07:39:25 +0600
Subject: [PATCH] fix: show 404 page instead of blank on first visit to
 non-existent package

---
 app/pages/package/[[org]]/[name].vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 936b3fe3e2..979fb08987 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -30,10 +30,13 @@ onMounted(() => {
 
 const { packageName, requestedVersion } = usePackageRoute()
 
-const { data: resolvedVersion, status: resolvedStatus } = await useResolvedVersion(
-  packageName,
-  requestedVersion,
-)
+// On server: await so 404 can be detected and thrown synchronously below.
+// On client (SPA fallback): skip await to avoid Suspense suspension → white page.
+const _resolvedVersionData = useResolvedVersion(packageName, requestedVersion)
+if (import.meta.server) {
+  await _resolvedVersionData
+}
+const { data: resolvedVersion, status: resolvedStatus } = _resolvedVersionData
 
 defineOgImage(
   'Package.takumi',
@@ -528,7 +531,11 @@ const showSkeleton = shallowRef(false)
     <!-- Scenario 1: SPA fallback — show skeleton (no real content to preserve) -->
     <!-- Scenario 2: SSR missing payload — preserve server DOM, skip skeleton -->
     <PackageSkeleton
-      v-if="isSpaFallback || (!hasServerContentOnly && (showSkeleton || status === 'pending'))"
+      v-if="
+        isSpaFallback ||
+        (!hasServerContentOnly &&
+          (showSkeleton || status === 'pending' || resolvedStatus === 'pending'))
+      "
     />
 
     <!-- During hydration without payload, show captured server HTML as a static snapshot.