From 2413d5806c62ccf119bb6608abd67bf64d7003f0 Mon Sep 17 00:00:00 2001
From: cylewaitforit <cyle@cylewaitfor.it>
Date: Sun, 19 Apr 2026 19:31:48 -0500
Subject: [PATCH 1/2] fix(ui): add loading state for translation status
 generated time

---
 app/pages/translation-status.vue | 28 ++++++++++------------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/app/pages/translation-status.vue b/app/pages/translation-status.vue
index d5ec027bc..ed5595d78 100644
--- a/app/pages/translation-status.vue
+++ b/app/pages/translation-status.vue
@@ -17,7 +17,6 @@ defineOgImage(
   { alt: () => `${$t('translation_status.title')} — npmx` },
 )
 
-const nuxt = useNuxtApp()
 const router = useRouter()
 const canGoBack = useCanGoBack()
 const { fetchStatus, status } = useI18nStatus()
@@ -28,14 +27,7 @@ const isLoading = computed<boolean>(
   () => fetchStatus.value === 'idle' || fetchStatus.value === 'pending',
 )
 
-const generatedAt = computed(() => {
-  const gat = status.value?.generatedAt
-  if (import.meta.client) {
-    return (nuxt.isHydrated ? new Date().toISOString() : gat) ?? new Date().toISOString()
-  }
-
-  return gat ?? new Date().toISOString()
-})
+const generatedAt = computed(() => status.value?.generatedAt)
 
 const localeEntries = computed<I18nLocaleStatus[]>(() => status.value?.locales || [])
 
@@ -68,16 +60,16 @@ ${template}`
             <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
           </button>
         </div>
-        <i18n-t
-          keypath="translation_status.generated_at"
-          tag="p"
-          scope="global"
-          class="text-fg-muted text-lg"
-        >
-          <template #date>
-            <NuxtTime :locale :datetime="generatedAt" date-style="long" time-style="medium" />
+        <p class="text-fg-muted text-lg">
+          <template v-if="isLoading || !generatedAt">
+            <SkeletonInline class="h-6 w-48" />
           </template>
-        </i18n-t>
+          <i18n-t v-else keypath="translation_status.generated_at" tag="span" scope="global">
+            <template #date>
+              <NuxtTime :locale :datetime="generatedAt" date-style="long" time-style="medium" />
+            </template>
+          </i18n-t>
+        </p>
       </header>
 
       <p class="text-fg-muted leading-relaxed mb-4">

From 871d3679d868158dec07c7819bbebecceba5ed94 Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <git@willow.sh>
Date: Mon, 20 Apr 2026 13:58:58 +0100
Subject: [PATCH 2/2] chore: tweak width

---
 app/pages/translation-status.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/translation-status.vue b/app/pages/translation-status.vue
index ed5595d78..a1622ff96 100644
--- a/app/pages/translation-status.vue
+++ b/app/pages/translation-status.vue
@@ -62,7 +62,7 @@ ${template}`
         </div>
         <p class="text-fg-muted text-lg">
           <template v-if="isLoading || !generatedAt">
-            <SkeletonInline class="h-6 w-48" />
+            <SkeletonInline class="h-6 w-96" />
           </template>
           <i18n-t v-else keypath="translation_status.generated_at" tag="span" scope="global">
             <template #date>