Back to docs
Patterns

Form save indicator

Communicate save state to users without blocking their flow.

States

Idle — no pending changes
Saving — request in flight
Saved — last write confirmed
Error — retry available

Placement

Recipe titleSaved

Inline with the form header keeps the indicator scannable without stealing focus from the content below.

Debounce strategy

0mskeystroke
800msidle → trigger save
2smax wait before forced flush

Debounce writes to avoid hammering your API. Show “Saving” immediately on keystroke so the user knows the system caught the change.

Edge cases

  • •Tab-away while saving — queue the write, resolve on return.
  • •Network offline — cache locally, sync when back online.
  • •Rapid field switching — discard stale in-flight requests.
← All patterns