I am currently developing a cutting-edge Ionic Angular App.
One of the pages in my app displays a spinner while waiting for data to be fetched from an API REST service. However, I'm facing an issue where even after the spinner disappears, it takes around 2 seconds for the data to actually show up on the screen. I've tried using change detection, but the delay persists. The data being retrieved is in the form of an array.
Below is a snippet of the code:
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>
Furthermore, the performance of my app seems sluggish, especially when switching between tabs with animations.
To better understand the issue, check out this video link: https://youtu.be/J_Vl7D10uWY
I suspect that the book-card component might be the root cause of the performance problem due to multiple conditional statements for applying different classes or displaying various elements.
Thank you!