BACK
Use casesToast queue — notifications one at a time
Use cases · 48

Toast queue — notifications one at a time

Pattern

The server returned 5 errors at once. You're not going to show 5 overlapping toasts in a stack! Show them one at a time: the first for three seconds, then the second, then the third. A queue.

The problem it solves

An imperative queue — an array + setInterval + a "currently showing" flag. It's easy to get a "stuck" flag after destroy and dropped messages.

Operators and why they matter

  • concatMap — subscribes to the next toast only after the previous one completes. That's the queue.
  • delay inside the inner stream — simulates the toast display time (3 seconds).
  • map — builds a display event for the container.

Gotchas

  • mergeMap — all toasts show in parallel. A stack of errors.
  • switchMap — a new toast replaces the previous one. Messages are lost.
  • exhaustMap — new notifications are ignored while the current one shows. Also lost.

What you get

Toast notifications show one at a time, in order of arrival. Nothing is lost, nothing overlaps.

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