Fix archive board action causing ~30s browser freeze (#578)

* Fix archive board freeze by navigating before clearing state

Navigate to /boards before calling boardStore.deleteBoard so the
BoardView is unmounted and its reactive subscriptions (sortedColumns,
cardsByColumn, filter computeds) are torn down before the sequential
state mutations fire.  This eliminates the ~30-second browser freeze
caused by cascading re-renders while the view was still mounted.

Add loading state to the lifecycle action button to provide immediate
feedback and prevent double-clicks.

Fixes #519

* Clear board detail state before filtering boards list in deleteBoard

Reorder state mutations in deleteBoard so detail refs (currentBoard,
cards, labels, comments, presence) are cleared before the boards array
is filtered.  This prevents downstream watchers on `boards` from
reading stale detail state during the reactive flush.

* Add tests for archive navigation order and loading state

Verify that router.push fires before boardStore.deleteBoard to prevent
reactive cascade freeze.  Add tests for the disabled/loading button
label during the archive action.

* Address review findings: use finally block, fix misleading comment, clean up tests

- Use finally block to always reset lifecycleActionInProgress (Major #1)
- Fix misleading "single assignment" comment in boardCrudStore (Minor #5)
- Remove redundant test with no meaningful assertions (Minor #3)
- Rename resolveDelete to resolvePush for clarity (Minor #4)

Author: Chris0Jeky

frontend/taskdeck-web/src/components/board/BoardSettingsModal.vue

@@ -21,6 +21,7 @@ const router = useRouter()
 // Form state
 const name = ref('')
 const description = ref('')
+const lifecycleActionInProgress = ref(false)
 
 // Watch for board changes
 watch(() => props.board, (newBoard) => {
@@ -30,9 +31,12 @@ watch(() => props.board, (newBoard) => {
   }
 }, { immediate: true })
 
-const lifecycleActionLabel = computed(() => (
-  props.board.isArchived ? 'Restore Board' : 'Move to Archive'
-))
+const lifecycleActionLabel = computed(() => {
+  if (lifecycleActionInProgress.value) {
+    return props.board.isArchived ? 'Restoring...' : 'Archiving...'
+  }
+  return props.board.isArchived ? 'Restore Board' : 'Move to Archive'
+})
 
 const lifecycleActionButtonClass = computed(() => (
   props.board.isArchived
@@ -80,21 +84,32 @@ async function handleLifecycleTransition() {
     return
   }
 
+  lifecycleActionInProgress.value = true
+
   try {
     if (shouldArchive) {
+      // Navigate away BEFORE clearing board state to prevent the mounted
+      // BoardView from re-rendering every computed (columns, cards, filters)
+      // as each piece of state is set to null/empty.  This was the root cause
+      // of the ~30-second freeze reported in #519 — sequential reactive
+      // mutations cascaded through dozens of watchers while the view was
+      // still mounted.
+      emit('updated')
+      emit('close')
+      await router.push('/boards')
+
+      // Run the store mutation after navigation so the old BoardView is
+      // already unmounted and its reactive subscriptions are torn down.
       await boardStore.deleteBoard(props.board.id)
     } else {
       await boardStore.updateBoard(props.board.id, { isArchived: false })
-    }
-
-    emit('updated')
-    emit('close')
-
-    if (shouldArchive) {
-      router.push('/boards')
+      emit('updated')
+      emit('close')
     }
   } catch (error) {
     console.error('Failed to update board lifecycle state:', error)
+  } finally {
+    lifecycleActionInProgress.value = false
   }
 }
 
@@ -188,6 +203,7 @@ useEscapeToClose(() => props.isOpen, handleClose)
           <button
             @click="handleLifecycleTransition"
             type="button"
+            :disabled="lifecycleActionInProgress"
             :class="lifecycleActionButtonClass"
           >
             {{ lifecycleActionLabel }}

frontend/taskdeck-web/src/store/board/boardCrudStore.ts

@@ -139,16 +139,13 @@ export function createBoardCrudActions(state: BoardState, helpers: BoardHelpers)
       state.error.value = null
       await boardsApi.deleteBoard(boardId)
 
-      // Remove from boards list
-      state.boards.value = state.boards.value.filter((b) => b.id !== boardId)
-
-      // Clear activeBoardId if the deleted board was the active selection
-      if (state.activeBoardId.value === boardId) {
-        state.activeBoardId.value = state.boards.value[0]?.id ?? null
-      }
-
-      // Clear current board if it's the one being deleted
-      if (state.currentBoard.value && state.currentBoard.value.id === boardId) {
+      // Clear detailed state for the current board before removing it from the
+      // main boards list. This prevents any watchers on the `boards` array
+      // from accidentally accessing stale detail state (like cards, labels, etc.)
+      // that belongs to the board being deleted. The primary performance fix
+      // for #519 is unmounting the BoardView before this action is called.
+      const isCurrent = state.currentBoard.value?.id === boardId
+      if (isCurrent) {
         state.currentBoard.value = null
         state.currentBoardCards.value = []
         state.currentBoardLabels.value = []
@@ -157,6 +154,15 @@ export function createBoardCrudActions(state: BoardState, helpers: BoardHelpers)
         state.editingCardId.value = null
       }
 
+      // Remove from boards list after clearing detail state so downstream
+      // watchers on `boards` do not attempt to read stale detail refs.
+      state.boards.value = state.boards.value.filter((b) => b.id !== boardId)
+
+      // Clear activeBoardId if the deleted board was the active selection
+      if (state.activeBoardId.value === boardId) {
+        state.activeBoardId.value = state.boards.value[0]?.id ?? null
+      }
+
       helpers.toast.success('Board archived successfully')
     } catch (e: unknown) {
       helpers.handleApiError(e, 'Failed to archive board')

frontend/taskdeck-web/src/tests/components/BoardSettingsModal.spec.ts

@@ -215,11 +215,65 @@ describe('BoardSettingsModal', () => {
     expect(mockStore.deleteBoard).toHaveBeenCalledWith('board-1')
     expect(mockStore.updateBoard).not.toHaveBeenCalled()
     expect(wrapper.emitted('close')).toBeTruthy()
+    // Navigation happens before deleteBoard to prevent reactive cascade freeze (#519)
     expect(mockRouter.push).toHaveBeenCalledWith('/boards')
 
     confirmSpy.mockRestore()
   })
 
+  it('should navigate before deleting board to avoid reactive cascade freeze', async () => {
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
+    const callOrder: string[] = []
+    mockRouter.push.mockImplementation(async () => { callOrder.push('navigate') })
+    mockStore.deleteBoard.mockImplementation(async () => { callOrder.push('delete') })
+
+    const wrapper = mount(BoardSettingsModal, {
+      props: {
+        board,
+        isOpen: true,
+      },
+    })
+
+    const archiveButton = wrapper
+      .findAll('button')
+      .find((btn) => btn.text().includes('Move to Archive'))
+    await archiveButton?.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(callOrder).toEqual(['navigate', 'delete'])
+
+    confirmSpy.mockRestore()
+  })
+
+  it('should disable lifecycle button while action is in progress', async () => {
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
+    let resolvePush: () => void
+    mockRouter.push.mockReturnValue(new Promise<void>((resolve) => { resolvePush = resolve }))
+
+    const wrapper = mount(BoardSettingsModal, {
+      props: {
+        board,
+        isOpen: true,
+      },
+    })
+
+    const archiveButton = wrapper
+      .findAll('button')
+      .find((btn) => btn.text().includes('Move to Archive'))
+    void archiveButton?.trigger('click')
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+
+    const buttonAfterClick = wrapper
+      .findAll('button')
+      .find((btn) => btn.text().includes('Archiving...'))
+    expect(buttonAfterClick?.exists()).toBe(true)
+    expect((buttonAfterClick?.element as HTMLButtonElement).disabled).toBe(true)
+
+    resolvePush!()
+    confirmSpy.mockRestore()
+  })
+
   it('should show restore action when board is archived', () => {
     const archivedBoard = { ...board, isArchived: true }