Skip to content

Display download progress bar when loading profiles from URLs#5919

Open
kim-em wants to merge 1 commit intofirefox-devtools:mainfrom
kim-em:add-download-progress-bar
Open

Display download progress bar when loading profiles from URLs#5919
kim-em wants to merge 1 commit intofirefox-devtools:mainfrom
kim-em:add-download-progress-bar

Conversation

@kim-em
Copy link
Copy Markdown

@kim-em kim-em commented Mar 30, 2026

This PR adds a download progress bar when loading profiles from URL-based data sources (from-url, public, and compare). Currently the app shows a decorative animation with no indication of actual download progress, which can be confusing when loading large profiles (100+ MB is common).

The fetch path is changed from response.arrayBuffer() (which provides no intermediate feedback) to streaming via response.body.getReader(), reporting progress through a new PROFILE_DOWNLOAD_PROGRESS Redux action. When the server provides a Content-Length header, a determinate progress bar with "X MB / Y MB" is shown; otherwise an indeterminate animation with "X MB downloaded" is displayed. In compare mode, progress is aggregated across the parallel downloads into a single bar.

Memory-conscious: when Content-Length is known, the response is read directly into a pre-allocated buffer (identical memory footprint to the original response.arrayBuffer()). Progress dispatches are throttled to ~10/s to avoid excessive Redux/React overhead. Falls back gracefully to response.arrayBuffer() when response.body is unavailable.

Accessibility: the progress bar uses role="progressbar" with aria-valuenow, aria-valuemax, aria-valuetext (formatted sizes), and a localized aria-label. Respects prefers-reduced-motion: reduce. All user-visible strings go through Fluent (en-US only, as expected).

🤖 Prepared with Claude Code

When loading profiles via from-url or public data sources, the app
previously showed only a decorative animation with no indication of
download progress. This replaces that with a real progress bar using
the ReadableStream API to track bytes received.

- Stream response body via response.body.getReader() instead of
  response.arrayBuffer() to report progress during download
- Pre-allocate buffer when Content-Length is known to avoid 2x
  memory spike; fall back to chunk accumulation when unknown or wrong
- Throttle progress dispatches to ~10/s to avoid excessive renders
- Show determinate bar with "X MB / Y MB" when Content-Length known,
  indeterminate animation with "X MB downloaded" otherwise
- Aggregate progress across parallel downloads in compare mode
- Add ARIA progressbar role, aria-valuetext, and localized aria-label
- Add Fluent localization strings for all user-visible text
- Respect prefers-reduced-motion: reduce

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@kim-em kim-em requested a review from a team as a code owner March 30, 2026 09:55
@canova canova removed the request for review from a team April 2, 2026 09:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant