showing skeleton loaders for changelog.

giving a msg when loading changelogs failed

Author: WilcoSp

app/components/Changelog/Releases.vue

@@ -57,8 +57,6 @@ watch(
 </script>
 <template>
   <div class="flex flex-col gap-2 py-3" v-if="releases">
-    <ClientOnly>
-      <ChangelogCard v-for="release of releases" :release :key="release.id" />
-    </ClientOnly>
+    <ChangelogCard v-for="release of releases" :release :key="release.id" />
   </div>
 </template>

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

@@ -5,7 +5,7 @@ definePageMeta({
   name: 'changes',
   path: '/package-changes/:path+',
   alias: ['/package/changes/:path+', '/changes/:path+'],
-  scrollMargin: 200,
+  scrollMargin: 190,
 })
 
 /// routing
@@ -69,7 +69,7 @@ watch(
 )
 
 // getting info
-const { data: changelog, pending } = usePackageChangelog(packageName, version)
+const { data: changelog, pending, error } = usePackageChangelog(packageName, version)
 
 const repoProviderIcon = useProviderIcon(() => changelog.value?.provider)
 const tptoc = useTemplateRef('tptoc')
@@ -109,9 +109,9 @@ defineOgImageComponent('Default', {
       :resolved-version="version"
       :display-version="pkg?.requestedVersion"
     />
-    <section class="container w-full pt-3" v-if="!pending">
+    <section class="container w-full pt-3">
       <div
-        class="sticky top-[--combined-header-height] pa-3 z-2 flex justify-between gap-4"
+        class="sticky top-[--combined-header-height] pa-3 z-2 flex justify-between gap-4 h-12"
         :class="$style.gitTocHeader"
       >
         <LinkBase
@@ -126,20 +126,39 @@ defineOgImageComponent('Default', {
           <!- prevents layout shift while loading ->
         </div>
       </div>
-
-      <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>
+      <section v-if="pending" 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 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>
     </section>
   </main>
 </template>

i18n/locales/en.json

@@ -1370,6 +1370,10 @@
   "changelog": {
     "pre_release": "Pre-release",
     "draft": "Draft",
-    "no_logs": "Sorry, this package does not publish changelogs, or its changelog format is not supported."
+    "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",
+      "p2": "Please try again later or {viewon}"
+    }
   }
 }

i18n/schema.json

@@ -4116,6 +4116,18 @@
         },
         "no_logs": {
           "type": "string"
+        },
+        "error": {
+          "type": "object",
+          "properties": {
+            "p1": {
+              "type": "string"
+            },
+            "p2": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
         }
       },
       "additionalProperties": false