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

[cylewaitforit]

🔗 Linked issue

#2588

🧭 Context

Adds loading state when "generated at date" is not available.

📚 Description

Previously the page would show the current date and time before the data loaded. Not only is it incorrect information but would cause the visual regression tests to consistently need updating.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 20, 2026 1:31am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 20, 2026 1:31am
npmx-lunaria	Ignored		Apr 20, 2026 1:31am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1408460a-7c4a-4388-a49f-451fac00f67f

📥 Commits

Reviewing files that changed from the base of the PR and between a272ff5 and 2413d58.

📒 Files selected for processing (1)

• app/pages/translation-status.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• app/pages/translation-status.vue

---

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes
  • Improved the loading state for the translation status timestamp display. The "generated at" field now shows a proper placeholder whilst loading, rather than displaying potentially inaccurate fallback values.

Walkthrough

Removed fallback timestamp behaviour from the translation status page: generatedAt now returns only the stored value, and the template shows a SkeletonInline while loading or when generatedAt is absent instead of rendering a current ISO timestamp.

Changes

Cohort / File(s)	Summary
Timestamp Display Logic app/pages/translation-status.vue	Removed useNuxtApp()/nuxt.isHydrated fallback that inserted new Date().toISOString(); generatedAt now equals status.value?.generatedAt only. Template updated to conditionally render SkeletonInline when isLoading or generatedAt is falsy and to render i18n-t only when generatedAt is present.

Possibly related issues

• Translation Status page shows Generation date: as current date and time when loading #2588: Matches the reported bug — this change removes the fallback-to-current-date behaviour and shows a loading skeleton while the generated timestamp is unavailable.

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: adding a loading state for the translation status generated time field.
Description check	✅ Passed	The description is directly related to the changeset, explaining why the loading state was needed and the problem it solves.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[cylewaitforit]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

🧹 Nitpick comments (1)

app/pages/translation-status.vue (1)

20-20: Remove the no-op hydration branch.

nuxt.isHydrated ? gat : gat now returns the same value on both paths, so the computed can be collapsed and useNuxtApp() can be dropped if it is no longer used elsewhere.

♻️ Proposed simplification

-const nuxt = useNuxtApp()
 const router = useRouter()
 const canGoBack = useCanGoBack()
 const { fetchStatus, status } = useI18nStatus()
@@
-const generatedAt = computed(() => {
-  const gat = status.value?.generatedAt
-  if (import.meta.client) {
-    return nuxt.isHydrated ? gat : gat
-  }
-
-  return gat
-})
+const generatedAt = computed(() => status.value?.generatedAt)

Also applies to: 31-38

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@app/pages/translation-status.vue` at line 20, The conditional branch using
nuxt.isHydrated that returns the same value on both sides is a no-op; remove the
useNuxtApp() call and simplify the computed expression to return the single
value directly. Locate the call to useNuxtApp() (nuxt) and the computed that
does "nuxt.isHydrated ? gat : gat" and replace the computed with just the "gat"
expression (and delete the useNuxtApp() import/call if it's unused elsewhere);
apply the same collapse to the similar pattern in the other computed/blocks
referenced (lines 31–38).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@app/pages/translation-status.vue`:
- Line 20: The conditional branch using nuxt.isHydrated that returns the same
value on both sides is a no-op; remove the useNuxtApp() call and simplify the
computed expression to return the single value directly. Locate the call to
useNuxtApp() (nuxt) and the computed that does "nuxt.isHydrated ? gat : gat" and
replace the computed with just the "gat" expression (and delete the useNuxtApp()
import/call if it's unused elsewhere); apply the same collapse to the similar
pattern in the other computed/blocks referenced (lines 31–38).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 511f4fb5-9003-47ce-bbb6-e9e38255f0f9

📥 Commits

Reviewing files that changed from the base of the PR and between 4e7eb1d and a272ff5.

📒 Files selected for processing (1)

• app/pages/translation-status.vue