Stop the Plan page unmounting on every wish mutation

useLeaveWishes.fetch() runs again after every add/update/remove to
refresh the list, and it flipped the same isLoading flag the initial load
uses. Plan.tsx swaps the whole page for a spinner on that flag, so every
mutation unmounted and remounted WishEditor -- wiping which rows were
expanded and any save status.

This predates auto-save (the old manual Save button did it too), but a
debounce that fires on every edit turned an occasional flicker into the
dominant experience, collapsing the row the user was editing.

A background refetch now toggles a separate isRefreshing flag; isLoading
stays true only for the initial load. Plan.tsx needed no change once the
hook was right.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RXMhc9nT6sNz1SL4j8dznL

frontend/src/hooks/useLeaveWishes.ts

@@ -4,7 +4,14 @@ import type { LeaveWish, LeaveWishCreateRequest, LeaveWishUpdateRequest } from '
 
 interface UseLeaveWishesResult {
   data: LeaveWish[]
+  /** True only while the initial (or workspace-switch) load is in flight —
+   * safe to gate a full-page blocking spinner on. */
   isLoading: boolean
+  /** True while a post-mutation background refresh is in flight. Never true
+   * at the same time as `isLoading`; a consumer that renders a blocking
+   * spinner should NOT key off this — it exists so a mutation's list refetch
+   * doesn't unmount whatever is currently showing `data`. */
+  isRefreshing: boolean
   error: string | null
   refresh: () => Promise<void>
   add: (req: LeaveWishCreateRequest) => Promise<LeaveWish>
@@ -12,25 +19,40 @@ interface UseLeaveWishesResult {
   remove: (id: string) => Promise<void>
 }
 
-/** CRUD over a workspace's recurring leave wishes (`/api/leave-wishes`). */
+/** CRUD over a workspace's recurring leave wishes (`/api/leave-wishes`).
+ *
+ * `fetch` is called both on initial mount/workspace-change and after every
+ * mutation (to keep `data` in sync with the server). Those two cases need
+ * different loading semantics: the initial load should block the page, but
+ * a post-mutation refresh must not — it happens while the user is mid-edit
+ * of a form built from `data`, and flipping `isLoading` would unmount that
+ * form. `background: true` routes the fetch through `isRefreshing` instead
+ * of `isLoading` so callers can tell the two apart.
+ */
 export function useLeaveWishes(workspaceId: string | null): UseLeaveWishesResult {
   const [data, setData] = useState<LeaveWish[]>([])
   const [isLoading, setIsLoading] = useState(false)
+  const [isRefreshing, setIsRefreshing] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
-  const fetch = useCallback(async () => {
-    if (!workspaceId) return
-    setIsLoading(true)
-    setError(null)
-    try {
-      const result = await api.getLeaveWishes(workspaceId)
-      setData(result)
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Failed to load leave wishes')
-    } finally {
-      setIsLoading(false)
-    }
-  }, [workspaceId])
+  const fetch = useCallback(
+    async (options?: { background?: boolean }) => {
+      if (!workspaceId) return
+      const background = options?.background ?? false
+      const setBusy = background ? setIsRefreshing : setIsLoading
+      setBusy(true)
+      setError(null)
+      try {
+        const result = await api.getLeaveWishes(workspaceId)
+        setData(result)
+      } catch (err: unknown) {
+        setError(err instanceof Error ? err.message : 'Failed to load leave wishes')
+      } finally {
+        setBusy(false)
+      }
+    },
+    [workspaceId],
+  )
 
   useEffect(() => {
     void fetch()
@@ -39,7 +61,7 @@ export function useLeaveWishes(workspaceId: string | null): UseLeaveWishesResult
   const add = useCallback(
     async (req: LeaveWishCreateRequest) => {
       const created = await api.createLeaveWish(req)
-      await fetch()
+      await fetch({ background: true })
       return created
     },
     [fetch],
@@ -48,7 +70,7 @@ export function useLeaveWishes(workspaceId: string | null): UseLeaveWishesResult
   const update = useCallback(
     async (id: string, req: LeaveWishUpdateRequest) => {
       const updated = await api.updateLeaveWish(id, req)
-      await fetch()
+      await fetch({ background: true })
       return updated
     },
     [fetch],
@@ -57,10 +79,10 @@ export function useLeaveWishes(workspaceId: string | null): UseLeaveWishesResult
   const remove = useCallback(
     async (id: string) => {
       await api.deleteLeaveWish(id)
-      await fetch()
+      await fetch({ background: true })
     },
     [fetch],
   )
 
-  return { data, isLoading, error, refresh: fetch, add, update, remove }
+  return { data, isLoading, isRefreshing, error, refresh: fetch, add, update, remove }
 }