Does anyone have an idea how I can make my favorite teams approach performant?
The component contains a list of app-games. The app-games component contains a list of games played on the same date.
The problem is that height of the list items can vary and therefor a virtual list is impossible. I don’t think an infinite scroll is possible because the games that are going to be shown on load are going to be the games closest to the current date. This means the infinite scroll has to be able to load new items on scroll up and on scroll down.
My current solution is a simple *ngFor. It works but it isn’t very performant as you know. When I have more than 3 favorite teams it becomes very laggy.
This is the current code:
<ion-content>
<ion-spinner *ngIf="loading" name="dots"></ion-spinner>
<ng-container *ngIf="!loading">
<app-games *ngFor="let gameSummaries of gamesSortedByDate" [gameSummaries]="gameSummaries"></app-games>
<div *ngIf="!gamesSortedByDate.length" class="no-favorites">
<ion-img class="no-favorites__icon"
src="assets/images/star-favorite.svg"></ion-img>
<ion-label class="no-favorites__description">Je hebt nog geen favoriete teams...</ion-label>
<ion-button class="no-favorites__button" fill="outline" mode="md" (click)="editFavorites()">
Toevoegen
<ion-icon slot="end" name="add-outline"></ion-icon>
</ion-button>
</div>
</ng-container>
</ion-content>
Help would be appreciated.
Thanks!
1 post - 1 participant