resolving version now happens in the background when switching versions, hopefully it resolves some issues

Author: WilcoSp

app/components/Changelog/Markdown.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-const { info, goToVersion, tpTarget } = defineProps<{
+const { info, goToVersion, tpTarget, resolveVersionPending } = defineProps<{
   info: ChangelogMarkdownInfo
   goToVersion: string | null | undefined
   tpTarget?: HTMLElement | null
+  resolveVersionPending?: boolean
 }>()
 
 const route = useRoute()
@@ -17,6 +18,9 @@ if (import.meta.client) {
   // doing this server side can make it that we go to the homepage
   const stopWatching = watchEffect(
     () => {
+      if (resolveVersionPending) {
+        return // need to wait till resolving is finished
+      }
       const toc = data.value?.toc
 
       if (toc && route.hash) {

app/components/Changelog/Releases.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { slugify } from '~~/shared/utils/html'
 
-const { info, requestedDate, goToVersion } = defineProps<{
+const { info, requestedDate, goToVersion, resolveVersionPending } = defineProps<{
   info: ChangelogReleaseInfo
   requestedDate?: string
   goToVersion?: string | null | undefined
+  resolveVersionPending?: boolean
 }>()
 
 const { data: releases, error } = await useLazyFetch<ReleaseData[]>(
@@ -32,6 +33,9 @@ if (import.meta.client) {
   // doing this server side can make it that we go to the homepage
   const stopWatching = watchEffect(
     () => {
+      if (resolveVersionPending) {
+        return // need to wait till resolving is finished
+      }
       const uReleases = releases.value
       if (route.hash && uReleases) {
         // scroll if there is a hash in the url

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

@@ -26,10 +26,11 @@ if (import.meta.server) {
 }
 
 // status: resolvedStatus
-const { data: version, pending: resolvingPending } = await useResolvedVersion(
-  packageName,
-  requestedVersion,
-)
+const {
+  data: version,
+  pending: resolvingPending,
+  error: resolvingError,
+} = await useResolvedVersion(packageName, requestedVersion)
 
 const { data: pkg } = usePackage(packageName, () => version.value ?? requestedVersion.value ?? null)
 
@@ -80,7 +81,7 @@ defineOgImageComponent('Default', {
 })
 </script>
 <template>
-  <main class="flex-1 flex flex-col" :style="stickyStyle">
+  <main class="flex-1 flex flex-col" :style="stickyStyle" v-if="!resolvingError">
     <PackageHeader
       page="changelog"
       :versionUrlPattern
@@ -108,7 +109,7 @@ defineOgImageComponent('Default', {
           <!-- prevents layout shift while loading -->
         </div>
       </div>
-      <section v-if="pending || resolvingPending" class="flex flex-col gap-2 py-3">
+      <section v-if="!changelog && !changelogError" class="flex flex-col gap-2 py-3">
         <SkeletonBlock class="h-8 w-40 rounded" />
         <ul class="ms-3 list-disc my-4 ps-6 marker:color-[--border-hover]">
           <li class="mb-1" v-for="_n in 5">
@@ -120,13 +121,14 @@ defineOgImageComponent('Default', {
         <SkeletonBlock class="h-5 w-3/4 max-w-2xl rounded" />
       </section>
 
-      <Suspense v-else>
+      <Suspense v-else-if="changelog">
         <template #default>
           <LazyChangelogReleases
             v-if="changelog?.type === 'release'"
             :info="changelog"
             :requested-date="versionDate"
             :goToVersion="requestedVersion && version"
+            :resolveVersionPending="resolvingPending"
             #error
           >
             <LazyChangelogErrorMsg
@@ -140,6 +142,7 @@ defineOgImageComponent('Default', {
             :info="changelog"
             :tpTarget="tptoc"
             :goToVersion="requestedVersion && version"
+            :resolveVersionPending="resolvingPending"
             #error
           >
             <LazyChangelogErrorMsg
@@ -148,10 +151,7 @@ defineOgImageComponent('Default', {
               :viewOnGit
             />
           </LazyChangelogMarkdown>
-          <p class="mt-5" v-else-if="changelogError?.statusMessage == ERROR_UNGH_API_KEY_EXHAUSTED">
-            {{ $t('changelog.rate_limit_ungh') }}
-          </p>
-          <p class="mt-5" v-else>{{ $t('changelog.no_logs') }}</p>
+
           <!-- <p class="mt-5" v-else-></p> -->
         </template>
         <template #fallback>
@@ -168,6 +168,28 @@ defineOgImageComponent('Default', {
           </section>
         </template>
       </Suspense>
+      <!-- error handling -->
+      <p class="mt-5" v-else-if="changelogError?.statusMessage == ERROR_UNGH_API_KEY_EXHAUSTED">
+        {{ $t('changelog.rate_limit_ungh') }}
+      </p>
+      <p class="mt-5" v-else-if="!version || !pkg?.versions[version]">
+        {{ $t('changelog.version_unavailable') }}
+      </p>
+      <p class="mt-5" v-else>
+        {{ $t('changelog.no_logs') }}
+      </p>
     </section>
   </main>
+  <!-- resolving the version didn't succeed, assunming that the package doesn't exist -->
+  <main v-else role="alert" class="flex flex-col items-center py-20 text-center container w-full">
+    <h1 class="font-mono text-2xl font-medium mb-4">
+      {{ $t('package.not_found') }}
+    </h1>
+    <p class="text-fg-muted mb-8">
+      {{ $t('package.not_found_message') }}
+    </p>
+    <LinkBase variant="button-secondary" :to="{ name: 'index' }">{{
+      $t('common.go_back_home')
+    }}</LinkBase>
+  </main>
 </template>

i18n/locales/en.json

@@ -1533,6 +1533,7 @@
       "p1": "Sorry, the changelog for {package} couldn't be loaded",
       "p2": "Please try again later or {viewon}"
     },
-    "rate_limit_ungh": "Sorry, Github's rate limit has been hit, try again in a moment"
+    "rate_limit_ungh": "Sorry, Github's rate limit has been hit, try again in a moment",
+    "version_unavailable": "The requested version is not available."
   }
 }

i18n/schema.json

@@ -4605,6 +4605,9 @@
         },
         "rate_limit_ungh": {
           "type": "string"
+        },
+        "version_unavailable": {
+          "type": "string"
         }
       },
       "additionalProperties": false