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:
1 parent
8cbec8d601
commit
4baeee159e
6 files changed
+55
-3
No files matched your search
@@ -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
|
||||
|
||||
Reference in new issue
Block a user