Sync Status
Offline, saving, saved or failed — with the count of changes being held.
- Feedback
- 1 file
- No extra npm packages
- Accessibility notes
All changes saved at 2:42 PM
pnpm dlx @dowel-ui/cli add sync-statusNo npm packages are needed beyond what Dowel already requires.
import { SyncStatus } from "@/components/ui/sync-status";Saved
Saving
Offline
Failed
Session
From The Browser
<SyncStatus>
| Prop | Type | Default |
|---|---|---|
announceAnnounce transitions. On by default, because going offline is the one thing a reader who is typing has to be told; syncing itself never announces, whichever way this is set. | boolean | true |
errorThe last send failed, in the reader's language. Takes precedence over | string | null | — |
lastSyncedAtWhen the last save succeeded. Shown as a time, not a relative phrase, so no clock is needed. | Date | — |
locale | string | — |
onlineOmit to read the browser's own status. | boolean | — |
onRetryOffered when a save failed. | () => void | — |
pendingChanges waiting to be sent. | number | 0 |
syncingA send is in flight. | boolean | false |
Plus every attribute of <div> except children, online.
The word is the status and the coloured dot is decoration, hidden from assistive technology. The visible text is not a live region: every save flips it and a region on it would narrate the whole session. A separate region, present from the first render, announces transitions only — went offline with what will happen to the changes, came back with what is being saved, could not save, saved after a failure — and never the churn of saving itself. Announcing is on by default because going offline is the one thing a reader who is typing has to be told, and it can be turned off. The server render assumes online, since a page with no interface to report has no business saying offline.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes