add progress bar to updater #205
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a visual progress bar to the application's auto-updater functionality, enhancing user feedback during update downloads. The implementation includes progress tracking for download percentage, transfer speed, and file sizes, along with the ability to cancel downloads in progress. The PR also includes a test mode for developers to simulate the download progress UI.
- Introduces download progress tracking with percentage, transferred/total bytes, and speed indicators
- Adds cancellation functionality with visual feedback
- Implements a development test mode to preview the progress UI without actual downloads
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/renderer/stores/update.ts | Adds download state management including downloading flag, downloadProgress object, and associated methods for tracking update download progress |
| src/renderer/components/UpdateApp.vue | Implements progress bar UI with percentage display, byte formatting, and cancel button; adds test progress functionality for development |
| src/renderer/views/settings/GeneralSettings.vue | Integrates update store and adjusts layout to conditionally hide version number when downloading to make room for progress bar |
| src/renderer/App.vue | Registers IPC event listeners for download progress updates, completion, and cancellation events |
| src/preload/preload.ts | Exposes isDev() method to renderer process for conditionally showing development-only features |
| src/main/system/updater.ts | Implements cancellation token support, download progress event forwarding, test progress simulation for dev mode, and improved error handling |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ipcMain.on('update.cancel', () => { | ||
| // Cancel test progress in dev mode | ||
| if (testProgressInterval) { | ||
| clearInterval(testProgressInterval) | ||
| testProgressInterval = null | ||
| } | ||
|
|
||
| // Cancel download in production using cancellation token | ||
| if (cancellationToken) { | ||
| try { | ||
| cancellationToken.cancel() | ||
| cancellationToken = null | ||
| window.webContents.send('update.cancelled') | ||
| } catch (error) { | ||
| console.error('Failed to cancel update:', error) | ||
| } | ||
| } | ||
| }) |
There was a problem hiding this comment.
The update.cancelled event is only sent when a cancellation token exists (line 86-90), but during test mode, no cancellation token is created. This means the renderer won't receive the update.cancelled event when canceling a test progress simulation. Consider sending update.cancelled after clearing the test interval to ensure consistent behavior between test and production modes.
| const update = () => { | ||
| updating.value = true | ||
| updateStore.resetDownloadProgress() | ||
| window.ipcRenderer.send('update.download') | ||
| } |
There was a problem hiding this comment.
The updating ref is set to true when initiating an update but is never reset when the download completes. This will leave the update button in a disabled state after the download finishes. Consider adding an IPC listener for the update.downloaded event to reset updating.value = false, or reset it in the cancelUpdate function which is called from App.vue when the download completes.
| <UpdateApp /> | ||
| <div class="flex items-center justify-between w-full"> | ||
| <span v-if="!updateStore.downloading">{{ settingsStore.settings.version }}</span> | ||
| <UpdateApp class="flex-1" /> |
There was a problem hiding this comment.
[nitpick] The flex-1 class on UpdateApp causes it to take all available horizontal space. While the component internally uses justify-end to align content to the right, it would be cleaner to avoid giving the component the full flex space when it doesn't need it. Consider conditionally applying flex-1 only when updateStore.downloading is true, or handle the layout adjustment entirely within the UpdateApp component itself.
| <UpdateApp class="flex-1" /> | |
| <UpdateApp :class="{ 'flex-1': updateStore.downloading }" /> |
closes #85