skeleton loaders are now being displayed when loading the releases/markdown & if loading them doesn't go well there is now a error msg instead of a blank screen

Author: WilcoSp

app/components/Changelog/ErrorMsg.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { pkgName, changelogLink, viewOnGit } = defineProps<{
+  pkgName?: string
+  changelogLink: string
+  viewOnGit: string
+}>()
+</script>
+<template>
+  <div class="w-full flex items-center flex-col gap-2 mt-4">
+    <p>{{ $t('changelog.error.p1', { package: pkgName }) }}</p>
+    <i18n-t keypath="changelog.error.p2" tag="p" #viewon>
+      <LinkBase :to="changelogLink">{{ viewOnGit.toLowerCase() }}</LinkBase>
+    </i18n-t>
+  </div>
+</template>

app/components/Changelog/Markdown.vue

@@ -7,7 +7,9 @@ const { info, requestedVersion, tpTarget } = defineProps<{
 
 const route = useRoute()
 
-const { data } = useLazyFetch(() => `/api/changelog/md/${info.provider}/${info.repo}/${info.path}`)
+const { data, error } = await useFetch(
+  () => `/api/changelog/md/${info.provider}/${info.repo}/${info.path}`,
+)
 
 watch(
   [() => data.value?.toc, () => requestedVersion?.toLowerCase(), () => route.hash],
@@ -38,4 +40,5 @@ watch(
     <ReadmeTocDropdown :toc="data.toc" class="justify-self-end" />
   </Teleport>
   <Readme v-if="data?.html" :html="data.html"></Readme>
+  <slot v-else-if="error" name="error"></slot>
 </template>

app/components/Changelog/Releases.vue

@@ -7,7 +7,7 @@ const { info, requestedDate, requestedVersion } = defineProps<{
   requestedVersion?: string | null | undefined
 }>()
 
-const { data: releases } = useFetch<ReleaseData[]>(
+const { data: releases, error } = await useFetch<ReleaseData[]>(
   () => `/api/changelog/releases/${info.provider}/${info.repo}`,
 )
 
@@ -59,4 +59,5 @@ watch(
   <div class="flex flex-col gap-2 py-3" v-if="releases">
     <ChangelogCard v-for="release of releases" :release :key="release.id" />
   </div>
+  <slot v-else-if="error" name="error"></slot>
 </template>

app/pages/package-changes/[...path].vue

@@ -138,27 +138,50 @@ defineOgImageComponent('Default', {
         <SkeletonBlock class="h-5 w-3/4 max-w-2xl rounded" />
       </section>
 
-      <template v-else-if="!error">
-        <LazyChangelogReleases
-          v-if="changelog?.type == 'release'"
-          :info="changelog"
-          :requestedDate="versionDate"
-          :requested-version="version || latestVersion?.version"
-        />
-        <LazyChangelogMarkdown
-          v-else-if="changelog?.type == 'md'"
-          :info="changelog"
-          :tpTarget="tptoc"
-          :requested-version="version || latestVersion?.version"
-        />
-        <p class="mt-5" v-else>{{ $t('changelog.no_logs') }}</p>
-      </template>
-      <section v-else class="flex items-center pa-3 flex-col text-lg gap-2">
-        <p>{{ $t('changelog.error.p1', { package: pkg?.name }) }}</p>
-        <i18n-t keypath="changelog.error.p2" tag="p" #viewon>
-          <LinkBase :to="changelog?.link">{{ viewOnGit.toLowerCase() }}</LinkBase>
-        </i18n-t>
-      </section>
+      <Suspense v-else>
+        <template #default>
+          <LazyChangelogReleases
+            v-if="changelog?.type == 'release'"
+            :info="changelog"
+            :requestedDate="versionDate"
+            :requested-version="version || latestVersion?.version"
+            #error
+          >
+            <LazyChangelogErrorMsg
+              :pkgName="pkg?.name"
+              :changelog-link="changelog.link"
+              :viewOnGit
+            />
+          </LazyChangelogReleases>
+          <LazyChangelogMarkdown
+            v-else-if="changelog?.type == 'md'"
+            :info="changelog"
+            :tpTarget="tptoc"
+            :requested-version="version || latestVersion?.version"
+            #error
+          >
+            <LazyChangelogErrorMsg
+              :pkgName="pkg?.name"
+              :changelog-link="changelog.link"
+              :viewOnGit
+            />
+          </LazyChangelogMarkdown>
+          <p class="mt-5" v-else>{{ $t('changelog.no_logs') }}</p>
+        </template>
+        <template #fallback>
+          <section class="flex flex-col gap-2 py-3">
+            <SkeletonBlock class="h-8 w-40 rounded" />
+            <ul class="ms-3 list-disc my-[1rem] ps-[1.5rem] marker:color-[--border-hover]">
+              <li class="mb-1" v-for="_n in 5">
+                <SkeletonBlock class="h-7 w-full max-w-2xl rounded" />
+              </li>
+            </ul>
+
+            <SkeletonBlock class="h-5 w-5/6 max-w-2xl rounded" />
+            <SkeletonBlock class="h-5 w-3/4 max-w-2xl rounded" />
+          </section>
+        </template>
+      </Suspense>
     </section>
   </main>
 </template>

i18n/locales/en.json

@@ -1372,7 +1372,7 @@
     "draft": "Draft",
     "no_logs": "Sorry, this package does not publish changelogs, or its changelog format is not supported.",
     "error": {
-      "p1": "Sorry, the changelogs for {package} couldn't be loaded",
+      "p1": "Sorry, the changelog for {package} couldn't be loaded",
       "p2": "Please try again later or {viewon}"
     }
   }

test/nuxt/a11y.spec.ts

@@ -151,6 +151,7 @@ import {
   CompareLineChart,
   ComparePackageSelector,
   CompareReplacementSuggestion,
+  ChangelogErrorMsg,
   DateTime,
   DependencyPathPopup,
   FilterChips,
@@ -2111,7 +2112,7 @@ describe('component accessibility audits', () => {
   })
 
   describe('Changelog', () => {
-    it('should have no accessibility violations', async () => {
+    it('ChangelogCard should have no accessibility violations', async () => {
       const component = await mountSuspended(ChangelogCard, {
         props: {
           release: {
@@ -2125,6 +2126,18 @@ describe('component accessibility audits', () => {
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
+
+    it('ChangelogErrorMsg should have no accessibility violations for warning variant', async () => {
+      const component = await mountSuspended(ChangelogErrorMsg, {
+        props: {
+          changelogLink: 'https://github.com/npmx-dev/npmx.dev/releases/',
+          pkgName: 'npmx-dev',
+          viewOnGit: 'View on Github',
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
   })
 
   describe('CollapsibleSection', () => {

test/nuxt/components/Changelog.spec.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+import { ChangelogErrorMsg } from '#components'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+
+describe('Changelog', () => {
+  it('Should display error message', async () => {
+    const component = await mountSuspended(ChangelogErrorMsg, {
+      props: {
+        changelogLink: 'https://github.com/npmx-dev/npmx.dev/releases/',
+        pkgName: 'npmx-dev',
+        viewOnGit: 'View on Github',
+      },
+    })
+
+    expect(component.text()).toContain(`Sorry, the changelog for npmx-dev couldn't be loaded`)
+    expect(component.text()).toContain(`Please try again later or view on github`)
+  })
+})