title: Caching something with RXJS until a certian condition
body: <p>I'm trying to make an RXJS Observable which will essentially act like a cache. Usually I can just use <code>shareReplay</code> for this, however the data I am trying to cache is based on the user, so needs to reset.
  The following does <em>almost</em> what I want:</p>
  <pre><code>const myObservable = userProfile.pipe(
    switchMap(profile =&gt; loadData(profile)),
    shareReplay(1)
  );
  </code></pre>
  <p>Now the data is loaded on the first subscription and it won't be loaded again until a new user profile comes along. However this does not quite work, because a subscriber that subscribes while the new data is being loaded still receives the old data which is cached. This causes the UI to display the old data from the previous user. To circumvent this I did the following:</p>
  <pre><code>const myObservable = userProfile.pipe(
    switchMap(profile =&gt; loadData(profile).pipe(startWith(null))),
    shareReplay(1),
    filter(v =&gt; v != null)
  );
  </code></pre>
  <p>This now works great except for one thing: Once a new user logs in, the data is immediately loaded, <em>even though there are currently no subscribers</em> to <code>myObservable</code>. This happens, because <code>shareReplay</code> never unsubscribes from the source. You can make it do so by using <code>refCount: true</code> - but that will disable the caching behavior I want, because the replay buffer is cleared when there are no more subscribers.</p>
  <p>I have no idea how to achieve this using RXJS operators or if I need to write a custom operator.</p>