fix(kanban): infinite ref-merge loop + drag lag

Two issues:

1. "Maximum update depth exceeded" inside Mantine's useMergedRef during
   drag. Root cause: the `data` object passed to dnd-kit's `useSortable`
   in KanbanCard and KanbanColumn was re-created on every render. Mantine
   Paper composes its internal ref with the consumer ref via
   useMergedRef, which uses a useCallback whose deps array contains the
   refs themselves. Whenever the underlying setNodeRef from useSortable
   became unstable (because dnd-kit's internal state churned on data
   identity change), the merged ref was reassigned each commit -> setState
   inside the ref callback -> next render -> new data identity -> loop.
   Wrap the sortable data in useMemo keyed on its real inputs.

2. Drag feels laggy. Each card listens to a 1-second `now` clock that
   re-renders the entire board to refresh the "time in column" label.
   Pause that interval while a drag is active so dnd-kit's per-pixel
   reconciliation does not also re-mount/re-layout every card every
   second. Tick resumes the moment the drag ends.

Also move the Select `data` array for the column max-time popover from
an inline expression to a module-level constant; same array identity
across all column instances and renders -> Mantine Combobox stops
re-running its diffing effect for free.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

This commit is contained in:

egutierrez

2026-05-14 14:12:06 +02:00

parent 76d85959f1

commit 7ba18f9114

5 changed files with 59 additions and 42 deletions

backend/dist/assets/index-D3fjM31T.js → backend/dist/assets/index-DfDr7FVp.js

Vendored

+32 -32

View File

File diff suppressed because one or more lines are too long

									
										backend/dist/index.html
									
Vendored

		+1
		-1
	
												View File
												
				@@ -4,7 +4,7 @@

				    <meta charset="UTF-8" />

				    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

				    <title>Kanban</title>

				    <script type="module" crossorigin src="/assets/index-D3fjM31T.js"></script>

				    <script type="module" crossorigin src="/assets/index-DfDr7FVp.js"></script>

				    <link rel="stylesheet" crossorigin href="/assets/index-b0xjFtx2.css">

				  </head>

				  <body>