ui/motion: SlidingIndicator re-places a resize that lands during a slide

TE
3d ago
+55-5

Fixes #33770. Leo (2026-11-03): "there's just tons of design systems related stuff for spacing guttters icons etc whatever like we don't yet feel "designed" yet nawmean". Motion follow-up from #33766.

What was wrong: useSlidingIndicator's ResizeObserver returns early while a slide runs, and the slide's finish did not remeasure, so a font load or resize inside the 240 ms slide left the highlight off its item until the next selection or resize.

Fix: the observer's placement is one place(); the slide's onfinish calls it, so the highlight lands on the item's current box with no second motion. The slide itself keeps its course (no mid-slide jump). Test: widen the target tab mid-slide, finish the slide, and the highlight takes the new width with exactly one animation played.

Overlap: #34300 (picker tabs, batch 6) adds an element.animate guard to the same effect's early-return line; this PR leaves that line alone, so the two merge cleanly.

Performance: no new timer, observer or loop. Stop conditions unchanged: the slide is one finite Web Animation that ends on its own (next change and unmount cancel it); the one ResizeObserver disconnects on unmount, which also clears the settle callback. Added work: one getBoundingClientRect pair per finished slide.

metricbeforeafterdeltaharness
reads per slide12+1 (on finish)motion.test.tsx
highlight off its item after a mid-slide resizeuntil next changeneverfixedmotion.test.tsx

No visual change at rest; spec leo-workspace design/motion-and-polish.md.

Agent session: agent session

🤖 Generated with Claude Code


Autofix with [code]smith
Open in [code]smith · Need help on this PR? Tag @codesmith-bot with what you need.


Summary by cubic

Fixes #33770: a font load or resize that landed during the 240ms slide left the highlight off its item until the next selection or resize. The slide's onfinish now re-reads the selected item's box and re-places the highlight with no second motion, while the slide itself keeps its course.

Details

  • Adds one getBoundingClientRect pair per finished slide; no new timers, observers, or loops.
  • Adds a test where a mid-slide resize re-places the highlight on finish with exactly one animation played.