Display loading while using Observable with Async pipe in template
<p>Situation: I am using FirebaseObjectObservable to populate my Ionic 2 (rc0) template. 
Template code:</p>

<pre><code>&lt;ion-card-content&gt;
  &lt;p&gt;{{(course | async)?.description}}&lt;/p&gt;
  &lt;br&gt;
  &lt;h2&gt;Learning Objectives&lt;/h2&gt;
  &lt;ul&gt;
    &lt;li *ngFor = "let objective of (course | async)?.objectives"&gt;{{objective.text}}&lt;/li&gt;
  &lt;/ul&gt;
  &lt;h2&gt;Takeaway&lt;/h2&gt;
  &lt;ul&gt;
    &lt;li *ngFor = "let takeaway of (course | async)?.takeaways"&gt;{{takeaway.text}}&lt;/li&gt;
  &lt;/ul&gt;
&lt;/ion-card-content&gt;
</code></pre>

<p>TS code: </p>

<pre><code>this.course = this.af.database.object('/bbwLocations/courses/' + courseId); 
</code></pre>

<p>this.course is a Firebase Object Observable. Everything works! But whenever I come into the template, there is a flash of empty no data. Then all the data jump out! Very not UX friendly. So I want to use some kind of pre-loading strategy. But since there is not TS logic here. Everything is controlled in template level with async pipe. How would I add loading in this situation? </p>