v2.0.14 — ghost + spinner on card move

Moving a card to another bucket took a visible round-trip (PATCH +
reloadAll) during which the card sat unchanged in the source bucket,
leaving the user wondering if the drop registered. Now every
bucket-move path marks the affected cards `.card-moving` as soon as
the action fires: 50% opacity, dark scrim and a centred accent-ring
spinner. The next renderBoard() rebuilds the DOM so the class comes
off automatically — no explicit cleanup needed.

Call sites:
- drag-drop onto a bucket tile (single + multi-select)
- drag onto an existing bucket to nest it (auto-super-bucket create)
- context-menu → Bucket → <target>

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
thandClaude Opus 4.7 committed 2026-04-19 14:44:03 +02:00
1 parent 8cbec8d601
commit 4baeee159e
6 files changed
+55 -3

No files matched your search

+14
View File
@@ -50,6 +50,20 @@ export function animateCardRemoval(ids) {
return new Promise(r => setTimeout(r, 260));
}
/** Ghost-and-spinner overlay for cards that are being moved between
* buckets. The PATCH + reloadAll round-trip used to leave the original
* tile sitting stale in the current bucket for a couple hundred ms;
* marking them gives immediate feedback. The class comes off naturally
* on the next renderBoard() (the DOM is rebuilt from fresh state). */
export function markCardsMoving(ids) {
if (!ids || !ids.length) return;
for (const id of ids) {
const el = board.querySelector(`[data-id="${id}"]`);
if (el) el.classList.add('card-moving');
}
}
window._markCardsMoving = markCardsMoving;
/** Add a pulse class to matching board cards and strip it after the
* animation. `cls` controls the variant: 'card-pulse-new' (3×, for
* relay-synced cards) or 'card-pulse-local' (1×, for cards the user