Fix copy-result check drawing from the wrong dash offset - #23
Merged
Merged
Conversation
The spinner-to-check morph interpolated stroke-dashoffset from the placeholder 20 while dasharray was the real path length 13, so the mark appeared as a slash, then a dot, then a V. Pin the length and draw with a keyframe from that value. Co-authored-by: Myles Cook <MylesMCook@users.noreply.github.com>
Co-authored-by: Myles Cook <MylesMCook@users.noreply.github.com>
There was a problem hiding this comment.
🟢 Approval recommended
The reviewed changes are scoped, validated, and have no unresolved blocking issues.
Pull request overview
Fixes the copy-result checkmark animation and preserves the badge during loading-to-done transitions.
Changes:
- Corrects the checkmark path length and draw animation.
- Handles reduced-motion behavior.
- Removes runtime SVG path measurement.
File summaries
| File | Description |
|---|---|
src/motion.css |
Updates checkmark drawing and reduced-motion styles. |
src/features/parser/components/date-picker.tsx |
Keeps the loading/done badge mounted. |
src/components/status-badge.tsx |
Removes runtime path measurement. |
Review details
- Files reviewed: 3/3 changed files
- Comments generated: 0
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed?
Copy result / status check was drawing as slash → dot → V because
stroke-dashoffsetstarted at the CSS fallback20while the path is length13.Pin
--check-mark-len: 13, draw with@keyframes t-check-draw, and keep oneStatusBadgeinstance for loading/done so the morph does not remount.copy_result_check_before.mp4
copy_result_check_after.mp4
Before: slash-shaped stroke
After: check stroke start
After: complete check
How did you check it?
pnpm check— 0 errors (existing SDK import-closure warning)examples/app/verify-calculator.mjs— 6/6 passed127.0.0.1:5174; before/after frame captureAnything that could break?
Reduced-motion still snaps the mark on with no animation. Live workers were already updated from this branch; GitHub auto-deploy on
mainstill needs a valid Cloudflare Actions token.To show artifacts inline, enable in settings.