Any idea how I can make this performant?

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!

You say “It works but it isn’t very performant as you know” - why do you say “as you know”. ngFor should not give issues on 3 items in general

Does the performance improve when you remove the no-favorites div block?

*ngIf="!gamesSortedByDate.length"

shouldn’t this be:

*ngIf="!gamesSortedByDate.length===0"

Is the performance still bad if you only put the app-games ngFor in ion-content? If so, then the problem lies in your custom app-games component.

Hey Tommertom

There are more than 3 items of course. All games that the three selected favorite teams play this season are listed here, sorted by date. So, for instance, if favorite team A plays on 1/1/2022 and favorite team B plays on 1/1/2022 they are grouped together in a card.

Such a card is an instance of app-games. Each team plays 22 games in a season. So if we have 3 favorite teams, and they play almost all their games on the same date, there’ll be around 30 instances of app-games.

I hope this makes things clear. There is no performance improvement when removing the no-favorites block.

Hi,

Thank you for this. Well, still lots of unknowns to figure out what could be wrong. Especially by only looking at the code provided.

Some suggestions:

  • replace the app-games with a simple div to see if that helps
  • use trackBy in ngFor to help angular determine which property to monitor for change detection

The property gameSummaries - is this a function (a getter)? Or does it change a lot?

I suspect that performance is troubled due to the angular change detection getting activated too many times. So to me its also a matter of removing stuff until it works and then see why.

Btw, if you say Performance hit - I assume scrolling right?

It’s more work than using off-the-shelf components, but wouldn’t it be possible to do your own pagination? That way you could always impose an upper limit on the number of games in the template.