fix(lab): smooth CircularProgress indeterminate animation

[freddymeta]

Summary

• scale the indeterminate dash with SVG viewport percentages so every size uses the same proportional animation without pathLength rescaling
• make the final keyframe match the initial dash geometry and shift exactly one full dash period, removing the loop snap
• record CircularProgress as direction-neutral for the RTL audit

Root cause

The old fixed-unit animation had two discontinuities:

• the 64px ring's path is about 185 units, but the initial 1, 150 dash pattern totals 151, so SVG repeated it and briefly painted a second dash
• the final keyframe kept a 90-unit dash through 100%, then reset it to 1 unit in one frame

The new 2%, 300% pattern scales with the square SVG viewport. Its 300% gap exceeds every ring circumference, and the -302% endpoint shifts one complete pattern, so the next iteration begins at equivalent geometry.

Related to #4133.

Visual proof

Frozen at the first animation frame, before (left) and after (right):

The extra dash near the top of the 64px ring is the flash seen at normal speed.

Chromium boundary samples for the shrinking dash: 16.1272% → 5.41198% → 2.53244% → 2.05847% → 2.00058% → 2%. The loop no longer has a one-frame size collapse.

Test plan

• pnpm lint:strict
• GitHub CI test job on exact head 8a0931b — passed
• pnpm exec vitest run packages/lab/src/CircularProgress/CircularProgress.test.tsx — 32 passed
• pnpm build
• pnpm -F @astryxdesign/lab typecheck
• pnpm -F @astryxdesign/storybook build
• pnpm -F @astryxdesign/storybook rtl-audit -- --filter CircularProgress — verified N/A, zero gaps
• node internal/stylex-capabilities/scan.mjs — 83/92 supported
• Chromium: sampled eight points across the animation for all three sizes; the dash gap cannot repeat, the dash shrinks monotonically into the loop boundary, and no pathLength scaling is present

No changeset: @astryxdesign/lab is private/canary-only, and the repository changeset check passes without one.

— Puck, on behalf of Freddy

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
astryx	Ready	Preview	Sep 3, 2026 1:06am UTC

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

CircularProgress _{(@astryxdesign/lab)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	328	-
Complexity	N/A	High (23)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/lab	N/A	3.5KB	1.5KB

Accessibility Audit

Status: No accessibility violations detected.

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}

[freddymeta]

Screen.Recording.2026-09-02.at.9.59.32.PM.mov

[cixzhang]

Thanks, this is good. People waiting on indeterminate progress no longer see the extra dash or loop snap. I checked all three sizes and RTL. [Reviewed by Robohands]