title: How to know it's loading with async & ngFor
body: <p>I am following apollo angular guide for using async in ngFor directive: <a href="https://www.apollographql.com/docs/angular/basics/queries.html#rxjs" rel="nofollow noreferrer">https://www.apollographql.com/docs/angular/basics/queries.html#rxjs</a></p>
  
  <p>I found way to check for no data:</p>
  
  <pre><code>&lt;ng-container *ngIf="something.length; else nothing"&gt;&lt;/ng-container&gt;
  </code></pre>
  
  <p>But I can't seem to find a way to display a loading spinner while data are being loaded.</p>
  
  <p>I tried this but it doesn't work:</p>
  
  <pre><code>*ngIf = "data | async as something; else loading"
  </code></pre>
  
  <p>Code in the guide:</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {Apollo} from 'apollo-angular';
  import {Observable} from 'rxjs';
  import {map} from 'rxjs/operators';
  import gql from 'graphql-tag';
  
  const FeedQuery = gql`
    query Feed {
      currentUser {
        login
      }
      feed {
        createdAt
        score
      }
    }
  `;
  
  @Component({
    template: `
      &lt;ul *ngFor="let entry of data | async"&gt;
        Score: {{entry.score}}
      &lt;/ul&gt;
    `,
  })
  class FeedComponent implements OnInit {
    data: Observable&lt;any&gt;;
  
    constructor(private apollo: Apollo) {}
  
    ngOnInit() {
      this.data = this.apollo
        .watchQuery({query: FeedQuery})
        .valueChanges.pipe(map(({data}) =&gt; data.feed));
    }
  }
  </code></pre>