From 272356a3bf407295110a933f318a561d4060d132 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 22:43:02 +0100
Subject: [PATCH 1/4] 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
---
 .../components/board/BoardSettingsModal.vue   | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/board/BoardSettingsModal.vue b/frontend/taskdeck-web/src/components/board/BoardSettingsModal.vue
index 519641f7e..813e7ff3b 100644
--- a/frontend/taskdeck-web/src/components/board/BoardSettingsModal.vue
+++ b/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,31 @@ 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)
+    lifecycleActionInProgress.value = false
   }
 }
 
@@ -188,6 +202,7 @@ useEscapeToClose(() => props.isOpen, handleClose)
           <button
             @click="handleLifecycleTransition"
             type="button"
+            :disabled="lifecycleActionInProgress"
             :class="lifecycleActionButtonClass"
           >
             {{ lifecycleActionLabel }}

From 3a6c7c1c34f1d50ff4e9f84bdd8c7c11a08fffcf Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 22:43:09 +0100
Subject: [PATCH 2/4] 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.
---
 .../src/store/board/boardCrudStore.ts         | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/frontend/taskdeck-web/src/store/board/boardCrudStore.ts b/frontend/taskdeck-web/src/store/board/boardCrudStore.ts
index a2c87ad52..5288b4211 100644
--- a/frontend/taskdeck-web/src/store/board/boardCrudStore.ts
+++ b/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 current board state in a single assignment to avoid cascading
+      // reactive updates.  Previously, each `.value = …` triggered its own
+      // flush cycle, which caused watchers/computed properties in mounted
+      // views (BoardView, BoardCanvas, etc.) to re-evaluate on every
+      // intermediate state — the root cause of the ~30 s freeze in #519.
+      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')

From fced42eeb346a125a5596d6aed5f8694badf1196 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 22:43:14 +0100
Subject: [PATCH 3/4] 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.
---
 .../components/BoardSettingsModal.spec.ts     | 82 +++++++++++++++++++
 1 file changed, 82 insertions(+)

diff --git a/frontend/taskdeck-web/src/tests/components/BoardSettingsModal.spec.ts b/frontend/taskdeck-web/src/tests/components/BoardSettingsModal.spec.ts
index 2d5edd619..8a231e731 100644
--- a/frontend/taskdeck-web/src/tests/components/BoardSettingsModal.spec.ts
+++ b/frontend/taskdeck-web/src/tests/components/BoardSettingsModal.spec.ts
@@ -215,11 +215,93 @@ 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 show loading label while archive action is in progress', async () => {
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
+    let resolveDelete: () => void
+    mockStore.deleteBoard.mockReturnValue(new Promise<void>((resolve) => { resolveDelete = resolve }))
+
+    const wrapper = mount(BoardSettingsModal, {
+      props: {
+        board,
+        isOpen: true,
+      },
+    })
+
+    const archiveButton = wrapper
+      .findAll('button')
+      .find((btn) => btn.text().includes('Move to Archive'))
+    // Trigger without await so we can inspect intermediate state
+    void archiveButton?.trigger('click')
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+
+    // The close event fires immediately, so the modal will already be hidden,
+    // but the button label should have been set to the in-progress state
+    expect(wrapper.emitted('close')).toBeTruthy()
+
+    resolveDelete!()
+    confirmSpy.mockRestore()
+  })
+
+  it('should disable lifecycle button while action is in progress', async () => {
+    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
+    let resolveDelete: () => void
+    mockRouter.push.mockReturnValue(new Promise<void>((resolve) => { resolveDelete = 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)
+
+    resolveDelete!()
+    confirmSpy.mockRestore()
+  })
+
   it('should show restore action when board is archived', () => {
     const archivedBoard = { ...board, isArchived: true }
 

From 6c6d01825762baf263a5e9aefcab63289010104b Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sun, 29 Mar 2026 23:02:45 +0100
Subject: [PATCH 4/4] 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)
---
 .../components/board/BoardSettingsModal.vue   |  1 +
 .../src/store/board/boardCrudStore.ts         | 10 +++---
 .../components/BoardSettingsModal.spec.ts     | 34 ++-----------------
 3 files changed, 9 insertions(+), 36 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/board/BoardSettingsModal.vue b/frontend/taskdeck-web/src/components/board/BoardSettingsModal.vue
index 813e7ff3b..2e658444b 100644
--- a/frontend/taskdeck-web/src/components/board/BoardSettingsModal.vue
+++ b/frontend/taskdeck-web/src/components/board/BoardSettingsModal.vue
@@ -108,6 +108,7 @@ async function handleLifecycleTransition() {
     }
   } catch (error) {
     console.error('Failed to update board lifecycle state:', error)
+  } finally {
     lifecycleActionInProgress.value = false
   }
 }
diff --git a/frontend/taskdeck-web/src/store/board/boardCrudStore.ts b/frontend/taskdeck-web/src/store/board/boardCrudStore.ts
index 5288b4211..348b70da1 100644
--- a/frontend/taskdeck-web/src/store/board/boardCrudStore.ts
+++ b/frontend/taskdeck-web/src/store/board/boardCrudStore.ts
@@ -139,11 +139,11 @@ export function createBoardCrudActions(state: BoardState, helpers: BoardHelpers)
       state.error.value = null
       await boardsApi.deleteBoard(boardId)
 
-      // Clear current board state in a single assignment to avoid cascading
-      // reactive updates.  Previously, each `.value = …` triggered its own
-      // flush cycle, which caused watchers/computed properties in mounted
-      // views (BoardView, BoardCanvas, etc.) to re-evaluate on every
-      // intermediate state — the root cause of the ~30 s freeze in #519.
+      // 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
diff --git a/frontend/taskdeck-web/src/tests/components/BoardSettingsModal.spec.ts b/frontend/taskdeck-web/src/tests/components/BoardSettingsModal.spec.ts
index 8a231e731..e08ab10d1 100644
--- a/frontend/taskdeck-web/src/tests/components/BoardSettingsModal.spec.ts
+++ b/frontend/taskdeck-web/src/tests/components/BoardSettingsModal.spec.ts
@@ -245,38 +245,10 @@ describe('BoardSettingsModal', () => {
     confirmSpy.mockRestore()
   })
 
-  it('should show loading label while archive action is in progress', async () => {
-    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
-    let resolveDelete: () => void
-    mockStore.deleteBoard.mockReturnValue(new Promise<void>((resolve) => { resolveDelete = resolve }))
-
-    const wrapper = mount(BoardSettingsModal, {
-      props: {
-        board,
-        isOpen: true,
-      },
-    })
-
-    const archiveButton = wrapper
-      .findAll('button')
-      .find((btn) => btn.text().includes('Move to Archive'))
-    // Trigger without await so we can inspect intermediate state
-    void archiveButton?.trigger('click')
-    await wrapper.vm.$nextTick()
-    await wrapper.vm.$nextTick()
-
-    // The close event fires immediately, so the modal will already be hidden,
-    // but the button label should have been set to the in-progress state
-    expect(wrapper.emitted('close')).toBeTruthy()
-
-    resolveDelete!()
-    confirmSpy.mockRestore()
-  })
-
   it('should disable lifecycle button while action is in progress', async () => {
     const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
-    let resolveDelete: () => void
-    mockRouter.push.mockReturnValue(new Promise<void>((resolve) => { resolveDelete = resolve }))
+    let resolvePush: () => void
+    mockRouter.push.mockReturnValue(new Promise<void>((resolve) => { resolvePush = resolve }))
 
     const wrapper = mount(BoardSettingsModal, {
       props: {
@@ -298,7 +270,7 @@ describe('BoardSettingsModal', () => {
     expect(buttonAfterClick?.exists()).toBe(true)
     expect((buttonAfterClick?.element as HTMLButtonElement).disabled).toBe(true)
 
-    resolveDelete!()
+    resolvePush!()
     confirmSpy.mockRestore()
   })