From 13aaf34191af01c2fe73d61bfd13442a308643e4 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 3 Aug 2026 11:05:41 +0100
Subject: [PATCH] fix: handle hydration state for admin ui

---
 app/composables/adminFetch.ts              | 19 +++++++++++++++----
 app/pages/admin/ama/[rkey].vue             |  4 ++--
 app/pages/admin/ama/index.vue              |  4 ++--
 app/pages/admin/entities/[rkey].vue        |  4 ++--
 app/pages/admin/entities/index.vue         |  4 ++--
 app/pages/admin/index.vue                  |  4 ++--
 app/pages/admin/invites/[rkey].vue         |  4 ++--
 app/pages/admin/invites/index.vue          |  4 ++--
 app/pages/admin/location.vue               |  4 ++--
 app/pages/admin/talk-groups/[rkey].vue     |  4 ++--
 app/pages/admin/talks/[rkey].vue           |  4 ++--
 app/pages/admin/talks/index.vue            |  6 +++---
 app/pages/admin/uses/categories/[rkey].vue |  4 ++--
 app/pages/admin/uses/index.vue             |  6 +++---
 app/pages/admin/uses/items/[rkey].vue      |  4 ++--
 15 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/app/composables/adminFetch.ts b/app/composables/adminFetch.ts
index 85f32554..866a9b85 100644
--- a/app/composables/adminFetch.ts
+++ b/app/composables/adminFetch.ts
@@ -1,7 +1,16 @@
 import type { AsyncData, NuxtError, UseFetchOptions } from 'nuxt/app'
+import type { ComputedRef } from 'vue'
 
 type KeysOf<T> = Array<T extends T ? (keyof T extends string ? keyof T : never) : never>
 
+/**
+ * `status` is `idle` during SSR (the request is client-only) and flips to
+ * `pending` as soon as the client picks it up, which would make any
+ * `status === 'pending'` template branch mismatch on hydration. `loading`
+ * covers both so server and client agree on the first render.
+ */
+type AdminAsyncData<T> = AsyncData<T, NuxtError<unknown> | undefined> & { loading: ComputedRef<boolean> }
+
 const cache = new Map<string, unknown>()
 
 /**
@@ -17,15 +26,15 @@ const cache = new Map<string, unknown>()
 export function useAdminFetch<T> (
   url: string,
   options: UseFetchOptions<T, T, KeysOf<T>, T> & { default: () => T },
-): AsyncData<T, NuxtError<unknown> | undefined>
+): AdminAsyncData<T>
 export function useAdminFetch<T> (
   url: string,
   options?: UseFetchOptions<T, T, KeysOf<T>, undefined>,
-): AsyncData<T | undefined, NuxtError<unknown> | undefined>
+): AdminAsyncData<T | undefined>
 export function useAdminFetch<T> (
   url: string,
   options: UseFetchOptions<T> = {},
-): AsyncData<T | undefined, NuxtError<unknown> | undefined> {
+): AdminAsyncData<T | undefined> {
   const key = `admin:${url}`
   const hasCached = import.meta.client && cache.has(key)
 
@@ -51,5 +60,7 @@ export function useAdminFetch<T> (
     }
   }
 
-  return result
+  return Object.assign(result, {
+    loading: computed(() => result.status.value === 'idle' || result.status.value === 'pending'),
+  })
 }
diff --git a/app/pages/admin/ama/[rkey].vue b/app/pages/admin/ama/[rkey].vue
index c717147b..112ccfb6 100644
--- a/app/pages/admin/ama/[rkey].vue
+++ b/app/pages/admin/ama/[rkey].vue
@@ -30,7 +30,7 @@ interface AmaEntry {
   answeredAt?: string
 }
 
-const { data, status } = useAdminFetch<AmaEntry>(`/api/admin/ama/${rkey.value}`, {
+const { data, loading } = useAdminFetch<AmaEntry>(`/api/admin/ama/${rkey.value}`, {
   watch: false,
 })
 
@@ -45,7 +45,7 @@ const initialImagePreviewUrl = computed(() => {
 <template>
   <AdminShell title="Answer">
     <div
-      v-if="!data && status === 'pending'"
+      v-if="!data && loading"
       class="flex flex-col gap-4"
       aria-hidden="true"
     >
diff --git a/app/pages/admin/ama/index.vue b/app/pages/admin/ama/index.vue
index 8d5e6f55..00dc2de9 100644
--- a/app/pages/admin/ama/index.vue
+++ b/app/pages/admin/ama/index.vue
@@ -17,9 +17,9 @@ interface AmaEntry {
   answeredAt?: string
 }
 
-const { data, refresh, status } = useAdminFetch<AmaEntry[]>('/api/admin/ama', { default: () => [] })
+const { data, refresh, loading } = useAdminFetch<AmaEntry[]>('/api/admin/ama', { default: () => [] })
 
-const showSkeleton = computed(() => status.value === 'pending' && !data.value.length)
+const showSkeleton = computed(() => loading.value && !data.value.length)
 
 function hasMissingPublishes (a: AmaEntry): boolean {
   const p = a.platforms
diff --git a/app/pages/admin/entities/[rkey].vue b/app/pages/admin/entities/[rkey].vue
index cbfab7c5..022a59a8 100644
--- a/app/pages/admin/entities/[rkey].vue
+++ b/app/pages/admin/entities/[rkey].vue
@@ -23,7 +23,7 @@ interface EntityEntry {
   value: DevRoeEntity.Record
 }
 
-const { data, status } = useAdminFetch<EntityEntry>(`/api/admin/entities/${rkey.value}`, {
+const { data, loading } = useAdminFetch<EntityEntry>(`/api/admin/entities/${rkey.value}`, {
   watch: false,
 })
 
@@ -43,7 +43,7 @@ async function save (value: EntityValue) {
       @submit="save"
     />
     <AdminSkeletonForm
-      v-else-if="status === 'pending'"
+      v-else-if="loading"
       :fields="['text', 'text', 'text', 'text', 'text']"
     />
   </AdminShell>
diff --git a/app/pages/admin/entities/index.vue b/app/pages/admin/entities/index.vue
index ed3925e7..4bfd3ed9 100644
--- a/app/pages/admin/entities/index.vue
+++ b/app/pages/admin/entities/index.vue
@@ -11,9 +11,9 @@ interface EntityEntry {
   value: DevRoeEntity.Record
 }
 
-const { data, refresh, status } = useAdminFetch<EntityEntry[]>('/api/admin/entities', { default: () => [] })
+const { data, refresh, loading } = useAdminFetch<EntityEntry[]>('/api/admin/entities', { default: () => [] })
 
-const showSkeleton = computed(() => status.value === 'pending' && !data.value.length)
+const showSkeleton = computed(() => loading.value && !data.value.length)
 
 async function remove (rkey: string, name: string) {
   if (!confirm(`Delete entity "${name}"?`)) return
diff --git a/app/pages/admin/index.vue b/app/pages/admin/index.vue
index 5106cab1..211c663f 100644
--- a/app/pages/admin/index.vue
+++ b/app/pages/admin/index.vue
@@ -3,7 +3,7 @@ definePageMeta({ layout: false })
 
 useHead({ title: 'admin' })
 
-const { data: stats, status } = useAdminFetch<{
+const { data: stats, loading } = useAdminFetch<{
   talks: number
   talkGroups: number
   usesCategories: number
@@ -11,7 +11,7 @@ const { data: stats, status } = useAdminFetch<{
   hasLocation: boolean
 }>('/api/admin/stats')
 
-const showSkeleton = computed(() => status.value === 'pending' && !stats.value)
+const showSkeleton = computed(() => loading.value && !stats.value)
 
 const cards = computed(() => [
   { label: 'Talks', value: stats.value?.talks ?? 0, to: '/admin/talks' },
diff --git a/app/pages/admin/invites/[rkey].vue b/app/pages/admin/invites/[rkey].vue
index 334a17fa..78c79ef4 100644
--- a/app/pages/admin/invites/[rkey].vue
+++ b/app/pages/admin/invites/[rkey].vue
@@ -29,7 +29,7 @@ interface InviteValue {
   createdAt?: string
 }
 
-const { data, status } = useAdminFetch<InviteEntry>(`/api/admin/invites/${rkey.value}`, {
+const { data, loading } = useAdminFetch<InviteEntry>(`/api/admin/invites/${rkey.value}`, {
   watch: false,
 })
 
@@ -49,7 +49,7 @@ async function save (value: InviteValue) {
       @submit="save"
     />
     <AdminSkeletonForm
-      v-else-if="status === 'pending'"
+      v-else-if="loading"
       :fields="['text', 'text', 'checkbox']"
     />
   </AdminShell>
diff --git a/app/pages/admin/invites/index.vue b/app/pages/admin/invites/index.vue
index 2b743b39..d949b9e8 100644
--- a/app/pages/admin/invites/index.vue
+++ b/app/pages/admin/invites/index.vue
@@ -12,9 +12,9 @@ interface InviteEntry {
   createdAt: string
 }
 
-const { data, refresh, status } = useAdminFetch<InviteEntry[]>('/api/admin/invites', { default: () => [] })
+const { data, refresh, loading } = useAdminFetch<InviteEntry[]>('/api/admin/invites', { default: () => [] })
 
-const showSkeleton = computed(() => status.value === 'pending' && !data.value.length)
+const showSkeleton = computed(() => loading.value && !data.value.length)
 
 async function remove (rkey: string, slug: string) {
   if (!confirm(`Delete invite "${slug}"?`)) return
diff --git a/app/pages/admin/location.vue b/app/pages/admin/location.vue
index 9bb43c82..e6184b4b 100644
--- a/app/pages/admin/location.vue
+++ b/app/pages/admin/location.vue
@@ -13,7 +13,7 @@ interface LocationEntry {
   value: DevRoeLocation.Record
 }
 
-const { data, refresh, status } = useAdminFetch<LocationEntry | null>('/api/admin/location')
+const { data, refresh, loading } = useAdminFetch<LocationEntry | null>('/api/admin/location')
 
 async function save (value: LocationValue) {
   await $fetch('/api/admin/location', {
@@ -27,7 +27,7 @@ async function save (value: LocationValue) {
 <template>
   <AdminShell title="Location">
     <AdminSkeletonForm
-      v-if="data === undefined && status === 'pending'"
+      v-if="data === undefined && loading"
       :fields="['pair', 'pair', 'checkbox']"
     />
     <AdminLocationForm
diff --git a/app/pages/admin/talk-groups/[rkey].vue b/app/pages/admin/talk-groups/[rkey].vue
index f03d2189..08f1a44d 100644
--- a/app/pages/admin/talk-groups/[rkey].vue
+++ b/app/pages/admin/talk-groups/[rkey].vue
@@ -25,7 +25,7 @@ interface TalkGroupEntry {
 
 // `watch: false` stops useFetch firing one last `/.../undefined` request
 // when `navigateTo` clears `route.params.rkey` on unmount.
-const { data, status } = useAdminFetch<TalkGroupEntry>(`/api/admin/talk-groups/${rkey.value}`, {
+const { data, loading } = useAdminFetch<TalkGroupEntry>(`/api/admin/talk-groups/${rkey.value}`, {
   watch: false,
 })
 
@@ -45,7 +45,7 @@ async function save (value: TalkGroupValue) {
       @submit="save"
     />
     <AdminSkeletonForm
-      v-else-if="status === 'pending'"
+      v-else-if="loading"
       :fields="['text', 'textarea']"
     />
   </AdminShell>
diff --git a/app/pages/admin/talks/[rkey].vue b/app/pages/admin/talks/[rkey].vue
index 42000cdf..4b1905cb 100644
--- a/app/pages/admin/talks/[rkey].vue
+++ b/app/pages/admin/talks/[rkey].vue
@@ -26,7 +26,7 @@ if (!rkey.value) {
 
 // `watch: false` stops useFetch firing one last `/.../undefined` request
 // when `navigateTo` clears `route.params.rkey` on unmount.
-const { data, status } = useAdminFetch<TalkEntry>(`/api/admin/talks/${rkey.value}`, {
+const { data, loading } = useAdminFetch<TalkEntry>(`/api/admin/talks/${rkey.value}`, {
   watch: false,
 })
 
@@ -49,7 +49,7 @@ async function save (value: TalkValue) {
       @submit="save"
     />
     <AdminSkeletonForm
-      v-else-if="status === 'pending'"
+      v-else-if="loading"
       :fields="['text', 'textarea', 'pair', 'pair', 'pair', 'text', 'pair', 'pair', 'text', 'text']"
       width-class=""
     />
diff --git a/app/pages/admin/talks/index.vue b/app/pages/admin/talks/index.vue
index 50c11051..85395572 100644
--- a/app/pages/admin/talks/index.vue
+++ b/app/pages/admin/talks/index.vue
@@ -12,11 +12,11 @@ interface TalkGroupEntry {
   value: DevRoeTalkGroup.Record
 }
 
-const { data: talksData, refresh: refreshTalks, status: talksStatus } = useAdminFetch<TalkEntry[]>('/api/admin/talks', { default: () => [] })
-const { data: groupsData, refresh: refreshGroups, status: groupsStatus } = useAdminFetch<TalkGroupEntry[]>('/api/admin/talk-groups', { default: () => [] })
+const { data: talksData, refresh: refreshTalks, loading: talksLoading } = useAdminFetch<TalkEntry[]>('/api/admin/talks', { default: () => [] })
+const { data: groupsData, refresh: refreshGroups, loading: groupsLoading } = useAdminFetch<TalkGroupEntry[]>('/api/admin/talk-groups', { default: () => [] })
 
 const showSkeleton = computed(() =>
-  (talksStatus.value === 'pending' || groupsStatus.value === 'pending')
+  (talksLoading.value || groupsLoading.value)
   && !talksData.value.length && !groupsData.value.length,
 )
 
diff --git a/app/pages/admin/uses/categories/[rkey].vue b/app/pages/admin/uses/categories/[rkey].vue
index 83fd4ce0..dfe2ceab 100644
--- a/app/pages/admin/uses/categories/[rkey].vue
+++ b/app/pages/admin/uses/categories/[rkey].vue
@@ -25,7 +25,7 @@ interface CategoryEntry {
 
 // `watch: false` stops useFetch firing one last `/.../undefined` request
 // when `navigateTo` clears `route.params.rkey` on unmount.
-const { data, status } = useAdminFetch<CategoryEntry>(`/api/admin/uses-categories/${rkey.value}`, {
+const { data, loading } = useAdminFetch<CategoryEntry>(`/api/admin/uses-categories/${rkey.value}`, {
   watch: false,
 })
 
@@ -45,7 +45,7 @@ async function save (value: UsesCategoryValue) {
       @submit="save"
     />
     <AdminSkeletonForm
-      v-else-if="status === 'pending'"
+      v-else-if="loading"
       :fields="['text', 'text', 'checkbox']"
     />
   </AdminShell>
diff --git a/app/pages/admin/uses/index.vue b/app/pages/admin/uses/index.vue
index 838f3773..a37505c8 100644
--- a/app/pages/admin/uses/index.vue
+++ b/app/pages/admin/uses/index.vue
@@ -18,11 +18,11 @@ interface ItemEntry {
   value: DevRoeUsesItem.Record
 }
 
-const { data: categoriesData, refresh: refreshCategories, status: categoriesStatus } = useAdminFetch<CategoryEntry[]>('/api/admin/uses-categories', { default: () => [] })
-const { data: itemsData, refresh: refreshItems, status: itemsStatus } = useAdminFetch<ItemEntry[]>('/api/admin/uses-items', { default: () => [] })
+const { data: categoriesData, refresh: refreshCategories, loading: categoriesLoading } = useAdminFetch<CategoryEntry[]>('/api/admin/uses-categories', { default: () => [] })
+const { data: itemsData, refresh: refreshItems, loading: itemsLoading } = useAdminFetch<ItemEntry[]>('/api/admin/uses-items', { default: () => [] })
 
 const showSkeleton = computed(() =>
-  (categoriesStatus.value === 'pending' || itemsStatus.value === 'pending')
+  (categoriesLoading.value || itemsLoading.value)
   && !categoriesData.value.length,
 )
 
diff --git a/app/pages/admin/uses/items/[rkey].vue b/app/pages/admin/uses/items/[rkey].vue
index 8f5cbef1..694bab72 100644
--- a/app/pages/admin/uses/items/[rkey].vue
+++ b/app/pages/admin/uses/items/[rkey].vue
@@ -25,7 +25,7 @@ interface ItemEntry {
 
 // `watch: false` stops useFetch firing one last `/.../undefined` request
 // when `navigateTo` clears `route.params.rkey` on unmount.
-const { data, status } = useAdminFetch<ItemEntry>(`/api/admin/uses-items/${rkey.value}`, {
+const { data, loading } = useAdminFetch<ItemEntry>(`/api/admin/uses-items/${rkey.value}`, {
   watch: false,
 })
 
@@ -45,7 +45,7 @@ async function save (value: UsesItemValue) {
       @submit="save"
     />
     <AdminSkeletonForm
-      v-else-if="status === 'pending'"
+      v-else-if="loading"
       :fields="['text', 'text', 'textarea', 'text', 'text']"
       width-class="max-w-2xl"
     />
-- 
2.51.2