title: RxJs loading spinner - cancel if no data
body: <p>Is it possible to cancel my loading spinner if my RxJs function returns no data? All the solutions I've seen online seem to rely on waiting for e.g. 10 seconds and if there's no data, replacing the spinner with an alternate message. But some of our clients have low internet speeds, so they see the &quot;You have no data&quot; message, and then a few seconds later some data finally comes through and the message is replaced.</p>
  <p>Edited to add a super-minimal example:</p>
  <p>component.ts</p>
  <pre><code>  myObservable$;
  
    ngOnInit(): void {
      const myArray = [1, 2, 3, 4];
      // const myArray = [];
  
      this.myObservable$ = from(myArray).pipe(
        bufferCount(10),
        concatMap((item) =&gt; of(item).pipe(delay(3000)))
      );
    }
  </code></pre>
  <p>component.html</p>
  <pre><code>&lt;div *ngIf=&quot;myObservable$ | async as myObservable; else spinner&quot;&gt;
    &lt;div *ngFor=&quot;let item of myObservable&quot;&gt;item: {{ item }}&lt;/div&gt;
  &lt;/div&gt;
  &lt;ng-template #spinner&gt;
    Spinner
  &lt;/ng-template&gt;
  </code></pre>
  <p>Note that if I comment out <code>const myArray = [1, 2, 3, 4];</code> and uncomment <code>const myArray = [];</code> so that my data stream is empty, the word &quot;Spinner&quot; stays on the screen forever. If my observable is empty, I would like the spinner to disappear and be replaced by a message saying &quot;No data&quot;.</p>
  <p>My real observable is a pipe that derives from getting a Firebase collection.</p>