Job Progress Dialog
A dialog for a long background job with a done, current and pending step list, an overall progress bar with ETA, run in background to a corner pill, cancel with confirm, and done and failed endings; also as an inline panel.
Preview
Exporting 1,284 notes…
Step 2 of 4
- , done
Gather notes
1,284 notes in 12 notebooks
- , in progress
Bundle images
312 of 486 images
- , pending
Render PDFs
- , pending
Compress archive
42%About 2 min left
Bundle images
Syncing calendar failed
The calendar server stopped responding. Nothing was lost.
- , done
Connect account
- , failed
Fetch events
Stopped at 214 of 380
- , pending
Merge changes
40%
Syncing calendar failed
Running in the background
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| job | { title, steps: { id, label, detail? }[], currentStep, progress, eta?, status: "running" | "done" | "failed" | "cancelled", error? } | — | The job's state; update it as the job moves. Required. |
| onCancel / confirmCancel | () => void / boolean | — / true | Cancel, after an inline “Keep going · Cancel job” confirm. |
| onRetry | () => void | — | Try again when failed. |
| onBackground | () => void | — | Panel only: shows Run in background. The dialog handles it itself. |
| onClose | () => void | — | Close from an ending. |
| doneAction | { label, onClick?, href? } | — | Primary action when done. |
| Dialog: open / defaultOpen / onOpenChange / backgroundable | boolean / boolean / (open) => void / boolean | — / false / — / true | JobProgressDialog: collapses to a corner pill when backgrounded (or on Escape while running). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.