title: RxJS 6 Pause or buffer observable when the page is not active
body: <p>So I have a stream of, let's say letters, and I need all letters in the right order to put them together into a word. Everything works fine until the user changes tab, minimize browser or switches application - behavior is almost the same as if I was using <code>setTimeout()</code> - messed up the order, lost items, etc. I tried to achieve my goal by using <code>bufferWhen()</code>, <code>bufferToggle()</code>, <code>takeUntil()</code>, <code>publish()</code> and <code>connect()</code> but nothing succeeded. I considered to use <code>delayWhen</code> as well, but it's deprecated and probably not suitable as it stops the stream immediately. Which functions should I use and how? Here's my code:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class MyComponent implements AfterViewInit {
    private visibilityChange$ = fromEvent(document, 'visibilitychange').pipe(startWith('visible'), shareReplay({ refCount: true, bufferSize: 1 }));
    private show$ = this.visibilityChange$.pipe(filter(() =&gt; document.visibilityState === 'visible'));
    private hide$ = this.visibilityChange$.pipe(filter(() =&gt; document.visibilityState === 'hidden'));
  
    public ngAfterViewInit() {
      const lettersStream$ = zip( // add delay for each letter
              from(['w', 'o', 'r', 'd']),
              interval(1000))
             // pause when hide$ fires, resume when show$
            .pipe(map(([letter, delayTime]) =&gt; letter))
            .subscribe(console.log);
    }
  }
  </code></pre>
  
  <p>I made a demo on <a href="https://stackblitz.com/edit/typescript-ohkzkm?file=index.ts" rel="nofollow noreferrer">stackblitz</a> - all I want is to see (stop writing when the tab is inactive) how the phrase is written on the screen.</p>