Showing an ActivityIndicator with Observable async

How to use an ActivityIndicator with Observable async

  •         
ngOnInit(){
  this.isLoading= true;
  this.isAnonymous = BackendService.isAnonymous;
  this.sub$ = this.route.params;
  this.articles$ = this.sub$.switchMap((params: any) => {
                              this.categoryTitle = params['categoryTitle'];
                              return <any>this.firebaseService.getArticleList(params['id'])});	
 this.articles$.subscribe(()=>{
           this.isLoading= false;
 });
}
        
    

  •         
<ListView [items]="articles$ | async">
            <template let-item="item">                  
                <GridLayout>
                    <GridLayout columns="auto,*,auto" class="card">
                        <Image class="m-5" horizontalAlignment="left" col="0" width="40" height="40" [src]="item.imagepath.length>0 ? item.imagepath : '~/assets/camera.png'"></Image>
                        <Label class="m-5"  (tap)="viewDetail(item.id, categoryTitle)" col="1" [text]='item.title'></Label>
                        <Label class="m-10 font-awesome"   style="color:black;" col="2" text='&#xf15c;'></Label>
                    </GridLayout>                 
                </GridLayout>
            </template>
    </ListView>
    <StackLayout class="dimmer" visibility="">
               <GridLayout rows="*" visibility="">
                       <ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" row="1" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>    
               </GridLayout>
    </StackLayout>