BACK
Use casesTyping indicator — typing / stopped typing
Use cases · 47

Typing indicator — typing / stopped typing

Pattern

In a chat you see "Alice is typing…". The first keypress turns the indicator on immediately (true). After a pause — off (false). Two behaviors on different timescales: instant and delayed.

The problem it solves

An imperative clearTimeout on each keypress + a new setTimeout to "turn off in a second" is easy to forget cleaning up on destroy or when switching the active chat. You get a "zombie indicator" that turns off after you've left the page.

Operators and why they matter

  • merge — combine two streams: "true immediately" and "false after a pause".
  • mapTo(true) — each keypress emits true immediately.
  • debounceTime(N), mapTo(false) — after N ms of silence, emit false.
  • startWith(false) + distinctUntilChanged — the initial state and suppressing duplicates.

Gotchas

  • delay without cancellation — false arrives even if the user kept typing. You specifically need debounce.
  • Without distinctUntilChanged the parent gets a dozen trues in a row on fast input.
  • Throttle the send of the typing event to the server separately — no one wants hundreds of messages a second.

What you get

The indicator turns on instantly on the first keystroke and turns off only after a real pause.

script.ts // TypeScript
CONSOLE · Console output
Hit Run to see the result...