Fading in Async request Items

Ionic Framework ionic-v3
1

I’m trying to fade in some items that are loading using the async pipe. However, the items are still flickering in, if i set a long fade time, the fade does work it just looks ridiculous. Whats the best way of going forward so that the items don’t flicker on the screen and only show when completely loaded?

Code.ts

> @Component({
>   selector: 'page-my-tutors',
>   templateUrl: 'my-tutors.html',
>   providers: [BookingService, TutorService],
>   animations: [
>     trigger('fade', [
>       state('visible', style({
>         opacity: 1
>       })),
>       state('invisible', style({
>         opacity: 0
>       })),
>       transition('invisible <=> visible', animate('1000ms ease-in'))
>     ]),

>   ]

> })
> export class MyTutorsPage implements OnInit {
>   public requests: any;
>   public request: IRequestForm;
>   public confirmationNumber: number = 0;
>   fadeState: String = 'invisible';
>   public tutorsLoading: BehaviorSubject<boolean> = new BehaviorSubject(false);

>   constructor(public navCtrl: NavController, public navParams: NavParams, public bookingService: BookingService, public tutorService: TutorService, public modalCtrl: ModalController) {

>   }

>   viewTutorProfile(request) {
>     this.navCtrl.push(MyTutorsDetailsPage, { request: request })
>   }

>   ngOnInit() {
>     this.tutorsLoading.next(true)
>     this.getTutors().then(() => {
>         this.tutorsLoading.next(false)
>     })
>   }

>   ionViewDidEnter() {
>           this.fadeState = 'visible';

>   }

>   private getTutors(): Promise<any> {
>     return this.bookingService.findRequests4Student()
>       .then(requestsObservable => {
>         return new Promise((resolve, reject) => {
>           this.requests = requestsObservable.map(requests => {
>             this.confirmationNumber = requests.length
>             return requests.map(request => {
>               this.request = request
>               this.tutorService.getTutorObj(request.tutor).then(tutorObj => {
>                 request.tutorObject = tutorObj
>               })
>               return request
>             })
>           })
>           resolve(this.requests)
>         }
>         )
>       })
>   }

Code.html

<ion-spinner name=“dots” *ngIf=“tutorsLoading | async”>

<ion-list *ngIf=“!(tutorsLoading | async)”>
<div [@fade]=“fadeState” >
<ng-container *ngFor=“let request of requests | async”>
<ion-item *ngIf=“!request.confirmed” no-lines (click)=“viewTutorProfile(request)”>



{{(request.tutorObject)?.fullName}}

{{request.subject}}

    <div class="requestedStatus">Requested {{request.requestDate | date}}</div>
  </ion-item>

  <ion-item-sliding *ngIf="request.confirmed" #item>
    <ion-item no-lines (click)="viewTutorProfile(request)">
      <ion-thumbnail item-left>
        <img class="circleImageSmall" src="{{(request.tutorObject)?.profilePicture?.URL}}">
      </ion-thumbnail>
      <div class="requestedTutorName">{{(request.tutorObject)?.fullName}}</div>
      <div class="requestedSubject">{{request.subject}}</div>

      <div class="confirmedStatus"> Confirmed {{request.confirmedDate | date}}</div>

    </ion-item>
    <ion-item-options side="right" class="sliderButtons">
      <button ion-button (click)="payTutor()">  <ion-icon name="card"></ion-icon>Pay Tutor</button>
    </ion-item-options>
  </ion-item-sliding>
</ng-container>
</div>

image

2

Bump !!! Can anyone help?