Ionic 4 - View taking long to show changes and performance issues

Ionic Framework
1

I am making an Ionic Angular App.

I have a page which shows a spinner until the call to an API REST is finished to retrieved the required data.

My problem is that after the call is done, the spinner dissapears, as expected, but the data takes like 2 seconds to be displayed on screen. I am using change detection but even if I turn it off, it’ll still do the same. This data is an array.

My code is the following

home.html

<ng-container *ngIf="loading else show">
   <spinner [purple]="true" class="veritcal-center"></spinner>
</ng-container>

<ng-template #show>
    <div>
      <ng-template #mobile>
        <ng-container *ngFor="let work of works">
          <book-home-card-mobile [work]="work">
          </book-home-card-mobile>
        </ng-container>
      </ng-template>
    </div>
</ng-template>

home.ts

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomePage {
  public works: Array<Work>;
  public loading: boolean;

  constructor(
    private worksService: WorksService,
    private detector: ChangeDetectorRef
  ) {
    this.works = [];
    this.loading = true;
  }

  ngOnInit() {
    this.getWorks();
  }

  ngAfterViewInit() {
    this.detector.detach();
  }

  private getWorks(): void {
    this.loading = true;
    this.detector.detectChanges();

    this.worksService.getWorks('newer', 0)
      .subscribe((response: any) => {
        response.forEach((work: Work) => this.works.push(work));
        this.loading = false;
        this.detector.detectChanges();
      });
  }
}

book-home-card-mobile.html

<div class="d-inline-block">
  <ion-card [class.view]="overlay" [class.waves-effect]="waves" [class.overlay]="overlay" class="material-tooltip-main"
    [class.xl-card]="main" [class.sm-card]="!main" data-toggle="tooltip" [title]="tooltip">
    <div class="d-inline-block portrait" [class.waves-effect]="details" [style.cursor]="details ?  'pointer' : 'auto'">
      <img [src]="work.image">
    </div>

    <div *ngIf="overlay" class="mask flex-center rgba-stylish-slight"></div>

    <div class="d-inline-block details">

      <div class="details-container">
        <ion-card-header>
          <ion-card-title style="white-space: nowrap; 
          overflow: hidden;
          text-overflow: ellipsis;" [class.waves-effect]="details" [style.cursor]="details ?  'pointer' : 'auto'">
            {{ work.title }}</ion-card-title>
        </ion-card-header>

        <div class="icons">
          <div class="d-inline-block icon">
            <ion-icon class="icon-card" name="eye"></ion-icon> <span class="amount">{{ visits }}</span>
          </div>

          <div class="d-inline-block icon">
            <ion-icon name="chatbubbles"></ion-icon> <span class="amount">{{ commentsCount }}</span>
          </div>

          <div class="d-inline-block icon">
            <ion-icon name="heart"></ion-icon> <span class="amount">{{ likes }}</span>
          </div>

        </div>

        <ng-container *ngIf="ellipsis else noEllipsis2">
          <div class="description" ellipsis [ellipsis-content]="work.description"></div>
        </ng-container>

        <ng-template #noEllipsis2>
          <div class="description" [class.ellipsis-scroll]="!ellipsis" s>
            {{ work.description }}
          </div>
        </ng-template>

        <ion-card-header>
          <div class="caret"><i class="fas fa-caret-right"></i></div>

          <ion-card-subtitle style="white-space: nowrap; 
            overflow: hidden;
            text-overflow: ellipsis;">{{ work.author_nickname }}</ion-card-subtitle>

        </ion-card-header>

        <div class="categories">
          <ng-container *ngFor="let category of work.genres">
            <ion-chip>
              <ion-label color="secondary">{{ category.name}}</ion-label>
            </ion-chip>
          </ng-container>
        </div>
      </div>
    </div>
  </ion-card>
  <br>
</div>

Also my App performance is really slow. Look at the animation of the tabs when switching between them.

Here is a video for better understanding: https://youtu.be/J_Vl7D10uWY

I feel it’s my book-card component what’s causing the performance issue but I don’t know why. Could it be because I have too many if statements to apply different classes or show different things?

Thanks!

2

Okay, as I suspected, the problem is my component and the usage of this library which was detecting any change on my view and recalculating ellipsis:

3

I am also seeing such performance issues but not using the same library you are. Was this the only way to solve your performance issues?
I have a very similar component set up to yours where a list component loads after receiving the data and the component is instantiated correctly as soon as the async call completes but the ion list element inside this component takes an additional second to render.