title: How to use CSS spinner in Angular2 while loading asynchronous list?
body: <p>This seems like it would be simple but I cannot find anything to address it.
  What I'm trying to do is to have a CSS spinner/loader while an asynchronous list loads. I've tried all kinds of things including trying to use ngSwitch, but so far nothing works and the spinner just spins indefinitely. Here is the base code:</p>
  
  <pre><code>&lt;div class="col-md-2 mediaContainer"&gt;
    Media:
    &lt;ul class="media"&gt;
      &lt;li *ngFor="let medium of media | async"
          [class.selected] = "medium === selectedMedium"
          (click)="onSelect(medium)"&gt;
        {{medium.name}}
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>While I've tried lots of things the following is an example that will not work:</p>
  
  <pre><code>&lt;div class="col-md-2 mediaContainer"&gt;
    Media:
    &lt;ul class="media" [ngSwitch]="status"&gt;
      &lt;li *ngSwitchCase="loading"&gt;&lt;loaders-css [loader]="'square-spin'" [loaderClass]="'my-loader'"&gt;&lt;/loaders-css&gt;&lt;/li&gt;
      &lt;li *ngFor="let medium of media | async"
          [class.selected] = "medium === selectedMedium"
          (click)="onSelect(medium)"&gt;
        {{medium.name}}
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've also put the ngSwitch and/or the switch cases inside the list but that doesn't work either. I have a feeling that 'status' only works with the elements themselves not their content, but I'm not sure how to set a switch value either (ie <a href="https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html</a>) and this seems like something to do with a promise possibly. Any ideas? Given the nature of what I'm doing it seems like it would be pretty common...</p>