fix(ui): add loading state for translation status generated time

Author: cylewaitforit

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">