[Feature]: Show download progress ring around desktop update button

[Kawixh]

Before submitting

• I searched existing issues and did not find a duplicate.
• I am describing a concrete problem or use case, not just a vague idea.

Area

apps/web

Problem or use case

When downloading a desktop update, the compact sidebar update button does not provide visual progress feedback at a glance.

T3 Code already tracks the update download percentage and exposes it through DesktopUpdateState.downloadPercent. The tooltip can show text such as "Downloading update (40%)", but the user has to hover the button to see that information.

Since the current update control is a small circular button, it would be useful to show the download percentage visually as a progress ring around the existing button while the update is downloading.

This would make it immediately clear that:

• the update is actively downloading;
• progress is being made;
• approximately how much of the download has completed.

The existing icon and update workflow can remain unchanged.

Proposed solution

While the desktop updater is in the downloading state, render a thin circular progress indicator around the existing update button using the already available downloadPercent value.

The current center icon should remain unchanged.

Suggested behavior:

1. When an update is available, keep the existing download icon/button.
2. After the user starts the download, show a circular progress ring around the button.
3. Drive the ring from DesktopUpdateState.downloadPercent.
4. Animate transitions between progress values so the ring moves smoothly.
5. When the download reaches 100% and the updater transitions to the downloaded/restart state, remove the progress ring and keep the existing restart icon.
6. Preserve the current tooltip, release notes popout, disabled state, update actions, and accessibility behavior.

For example:

0%:
○ ↓

50%:
◐ ↓

100%:
● ↓

The actual implementation could use a small SVG circle with strokeDasharray / strokeDashoffset around the existing button.

This should be a visual-only enhancement. No new updater API, IPC contract, or persistent state should be necessary because download progress is already available in the renderer.

Why this matters

Desktop updates can take long enough that a disabled download button provides little indication of whether the update is actively progressing or stalled.

T3 Code already knows the exact download percentage, so exposing it visually would provide useful feedback without adding another label or taking additional sidebar space.

A progress ring fits naturally around the existing compact circular update control and lets users understand the download state without opening a tooltip.

This is especially useful after the recent compact-sidebar update UI, where the updater is intentionally represented by a small icon-only control.

Smallest useful scope

The smallest useful version only needs to change the sidebar update control.

Scope:

• Only show the ring when state.status === "downloading".
• Use the existing state.downloadPercent.
• Keep the existing download/restart/check icons.
• Keep the current button dimensions and layout.
• Keep the current tooltip and release notes behavior.
• Do not change the download/update workflow.
• Do not add new settings.
• Do not add a new IPC API.
• Do not redesign the update button.
• Remove the ring when download is complete.

A first implementation can use the progress update cadence already provided by the desktop updater. Smoother/finer progress broadcasting can be considered separately if needed.

Alternatives considered

Show the percentage as text next to the button.

This would make progress obvious, but it would consume additional sidebar width and conflict with the intentionally compact footer design.

Only show the percentage in the tooltip.

This is essentially the current behavior. It works, but users have to hover the update control to know whether the download is progressing.

Replace the existing update icon with a custom progress icon.

A previous PR (#1427) explored a custom rocket icon whose fill represented download progress. That PR was closed without being merged, and it also changed significantly more of the update-button visual language.

The proposed progress ring is intentionally narrower: keep the current update icon and current design, and only add progress around it.

Use an indeterminate spinner instead.

A spinner would indicate activity but would discard useful information because T3 already has the actual download percentage.

Risks or tradeoffs

The main concern is avoiding unnecessary visual complexity in an already compact control.

The ring should therefore be subtle and only appear during an active download.

Download progress is currently broadcast to the renderer in throttled increments, so the ring may advance in noticeable steps rather than continuously. A short CSS transition between values should make this reasonably smooth without changing updater behavior.

If finer progress updates are desirable later, that can be handled separately rather than expanding this UI-focused change.

Accessibility should continue to rely on the existing button label/tooltip rather than using the visual ring as the only indication of progress.

The enhancement should also be compatible with ongoing updater UI work, particularly changes that keep the release-notes tooltip interactive while downloading.

Examples or references

Current implementation:

• apps/web/src/components/sidebar/SidebarUpdatePill.tsx
  Renders the compact desktop update control and its check/download/restart icons.

• apps/web/src/state/desktopUpdate.ts
  Subscribes to desktop update state changes in the renderer.

• packages/contracts/src/ipc.ts
DesktopUpdateState already contains:

  downloadPercent: number | null

• apps/desktop/src/updates/DesktopUpdates.ts
  Receives download-progress events from the Electron updater.

• apps/desktop/src/updates/updateMachine.ts
  Updates downloadPercent while status is downloading.

Related PRs:

• feat(web): compact sidebar footer actions #6210 — merged
  “feat(web): compact sidebar footer actions”

  This introduced the current compact update control in the sidebar footer.

  feat(web): compact sidebar footer actions #6210

• Improve desktop update button with status-based visuals #1427 — closed, not merged
  “Improve desktop update button with status-based visuals”

  This previously experimented with visual download progress by filling a custom rocket icon. The proposed enhancement is intentionally smaller and preserves the current icon/button design.

  Improve desktop update button with status-based visuals #1427

• fix(desktop): keep release notes visible while downloading #6412 — currently open
  “fix(desktop): keep release notes visible while downloading”

  This modifies the same update button to keep its release-notes popout hoverable/focusable during downloads. A progress-ring implementation should preserve that behavior.

  fix(desktop): keep release notes visible while downloading #6412

• fix(desktop): reduce update restart time #4777 — currently open
  “fix(desktop): reduce update restart time”

  This improves the preparing/restart stage of macOS updates but does not add visual download progress.

  fix(desktop): reduce update restart time #4777

Contribution

• I would be open to helping implement this.

[juliusmarminge]

Implemented in #6504. The desktop sidebar update button now shows a progress ring while downloading, using the actual download percentage, and switches to the restart icon when ready. Closing this request as completed.