Project: case board motion and route continuity

Last updated: 4 Oct 20268 min read

project

Build a case-review board with queue columns, a detail route, and an activity panel. Assignment changes use a revisioned server response; the DOM and accessible column name update from that result. A short effect may illustrate the move, but cancelling it cannot undo the assignment or leave the card in an old column. Own at most one scripted animation handle per case, cancel stale handles on a newer revision, and release them when the board unmounts. The detail route may use a view transition when available, but URL, heading, focus, scroll, and back navigation must work with the effect skipped. Use a reduced-motion path that changes state immediately and announces the outcome in text. A bulk reassignment of 62 cases should not launch 62 expensive effects; summarize the change and measure frame time on a dense board. Keep the visual state accurate when a save fails, a route fetch returns late, or a user opens another case before the first effect completes.

Build contract

Close a panel before its entrance ends and preserve correct hidden and focus state.
Cancel a stale card animation after a newer revision and release its handle on unmount.
Open a case route with and without view-transition support, preserving history and focus.
Compare dense-board frame time with a reduced-motion bulk update.

Implementation checkpoint

function cardMotionAllowed(reducedMotion, changedCards, maximumActive) {
  return !reducedMotion && changedCards <= maximumActive;
}
console.log(cardMotionAllowed(false, 62, 12));
// Output: false

Cost and boundaries

Motion code may be constant-time for one card while painting, snapshot memory, and layer count grow with affected surfaces. Measuring layout during each frame can block input. Keep simultaneous effects bounded and compare the full board on target devices. A plain route path saves animation work but still requires focus and scroll decisions. Track active handles, skipped effects, dropped frames, and time until the new detail is operable.

Failure drill

Disable animation and check that panel state and focus still change. Rapidly open and close the activity panel, then open case 47 while case 62 loads slowly. Deliver case 62 last and prove it cannot replace the newest route. Give two visible cards the same transition name and verify fallback. Cancel a card handle during unmount, then confirm no stale completion callback changes the new board. Deny a save and announce the rollback without relying on movement alone.

Acceptance checks

Semantic state reaches its final value without motion.
Latest revision and destination win interrupted work.
Keyboard focus and back navigation survive skipped effects.
The dense-board rendering budget is measured.

Common Mistakes

Using an animation finish event to commit a route.
Leaving obsolete handles attached to removed cards.
Removing the only state cue when reduced motion is active.

web-tech

web-development