fix: make progress indicators interruption-safe

[OskarEichler]

Fixes

• Target the actual linear bar ID in CSS.
• Ignore pre-connection and unchanged attribute callbacks; avoid rebuilding identical DOM.
• Cancel previous completion timers when a new build starts and clear timers on disconnection.
• Reset circular completion state so subsequent builds appear.
• Expose progressbar name/range/value and honor reduced motion.

Compatibility

No public API, dependency or engine change. Completion still takes 800 ms (500 ms pause plus 300 ms fade); reduced motion removes animation but retains the completion delay. Initial circular zero progress is visible as the start of a build.

Motion review

Before	After	Why
Old completion can hide a new build	New progress cancels completion	Interruption-safe rebuilds
Circular indicator stays disappeared	Next build resets visibility	Reusable progress
Reduced motion still animates	Animation disabled	Respect system preference

Verdict: Approve — no motion blocker found in the reviewed paths. Native CSS supplies the visual effect; no animation package added.

Verification

Standalone controls cover pre-connection attributes, stable DOM identity, linear/circular interruption, both timer cleanup paths and reduced-motion CSS. Browser checks confirm a visible 30% linear bar and 40% circular indicator after immediate restart. Combined client diagnostic suite: 30 pass; existing client suites, build, lint and types pass.

Audit scope

This is a focused, independently based change from a broader source review at f804962. The combined frozen-source run executed 1,002 tests: 951 passed, 43 failed, one cancelled, seven skipped. Failures were traced to the separately proposed overlay DOM snapshots, reconnect-disabled test expectation and IPv6 host-test assumptions; it is not represented as a green full suite. Relevant focused results are listed above. No checked-in tests/specs/snapshots were added or modified. Hosted CI and the full OS/Node matrix remain pending.

Summary by CodeRabbit

• Accessibility

  • Added progress-bar semantics and accessible value announcements to progress indicators.

• Improvements

  • Improved progress behavior during interruptions and repeated updates.
  • Added reduced-motion support for linear and circular indicators.
  • Improved timer cleanup and show/hide transitions.
  • Fixed linear progress styling and reset behavior.

[changeset-bot]

🦋 Changeset detected

Latest commit: c1e5eaa

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
webpack-dev-server	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 2661b216-938d-4c55-8c02-65fb73dfcf7c

📥 Commits

Reviewing files that changed from the base of the PR and between f804962 and c1e5eaa.

📒 Files selected for processing (2)

• .changeset/progress-lifecycle.md
• client-src/progress.js

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

Walkthrough

The wds-progress custom element now exposes progressbar ARIA attributes and supports reduced-motion preferences. The linear progress selector changes from #bar to #progress. Reset and attribute-change handling avoid unnecessary updates. Show and hide operations share timer-based lifecycle logic, and disconnection clears the animation timer. A patch changeset records these updates for webpack-dev-server.

Merge Risk: ⚪ Minimal · up to c1e5e

The PR makes localized progress-indicator lifecycle, accessibility, and reduced-motion improvements without changing public APIs or runtime dependencies. No actionable merge-blocking risk remains after normal checks and review.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: making progress indicators safe when builds are interrupted.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files. (1 skipped: 1 …
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

client-src/progress.js

ESLint failed to execute (timeout).

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}