Key insights
- Never write on every keystroke. Start a debounce timer when typing pauses, reset it on each key, and commit one clean write after roughly 800ms of silence.
- Model the status indicator as a state machine with clear states: typing, saving, saved, offline, error. Users trust the pill more than the feature itself, so never let it read 'Saved' when the write never landed.
- When the connection drops, push every edit into a local queue and surface a badge counting what is pending. On reconnect, drain the queue in order, oldest first.
- Two tabs on one document means last write wins can silently erase an hour of someone's work. Merge concurrent changes or warn the user, but never overwrite in silence.
- Guard the exit. If unsaved work exists, use the browser's beforeunload prompt to intercept the closing tab. One ugly dialog beats an afternoon retyped.
Do / Don't
- Do: Debounce writes so one clean save fires after a pause (around 800ms), not on every keystroke.
- Do: Queue edits locally while offline and replay them oldest first once the connection returns.
- Do: Keep the status honest by mapping it to explicit states and updating it in real time.
- Don't: Let the pill show 'Saved' when the change never reached the server.
- Don't: Overwrite a concurrent edit silently; merge the changes or warn instead.
- Don't: Let a tab close on unsaved work without a confirmation dialog.
