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

+30
View File
@@ -524,6 +524,36 @@ body.rounded-cards .card-done-badge i { position: static; bottom: auto; right: a
animation: card-remove 0.25s ease-in forwards;
pointer-events: none;
}
/* Move-in-flight: card ghosted with a spinner overlay while the
* PATCH + reloadAll round-trip completes. The pseudo-elements paint
* a dim scrim and a centred spinning ring so the origin bucket
* clearly shows the card is "leaving". Removed by the next
* renderBoard() since the DOM is rebuilt from scratch. */
.board-card.card-moving {
opacity: 0.5;
pointer-events: none;
position: relative;
}
.board-card.card-moving::before {
content: "";
position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.25);
z-index: 3;
pointer-events: none;
}
.board-card.card-moving::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 22px; height: 22px;
margin: -11px 0 0 -11px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-top-color: var(--t-accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
z-index: 4;
pointer-events: none;
}
.box-select {
position: absolute; border: 1px solid var(--t-accent); background: rgba(56, 189, 248, 0.08);
pointer-events: none; z-index: 10;