Hello all!
Disclaimer
I know there have been a bunch of posts about using VirtualScroll, but I am posting this here, because none seem the have run into my issue. Not sure if its an acute problem or a larger problem with Ionic.
Issue
In my app, I am implementing a variable length ion-list, with a maximum number of elements at around 300. To speed up loading and performance I am trying to use VirtualScroll.
<ion-list [virtualScroll]="filteredClients" [bufferRatio]="3">
<ion-item *virtualItem="let client" (click)="select(client)">
<client-list-element *ngIf="filteredClients.length > 0" [client]="client"></client-list-element>
</ion-item>
<ion-item *ngIf="filteredClients.length == 0 && !isLoading && clients?.length > 0" text-wrap>
<h3 text-center>We are sorry, but no clients were found.</h3>
<h3 text-center>Please try another search.</h3>
</ion-item>
</ion-list>
However, when I implement it, the first ~30 elements are loaded just fine.
If I change the bufferRation to its default of 2, that number of properly loaded clients decreases to about ~20.
Now, When I scroll down the list continues for the entire length of filtered clients, but the has not replaced the previous client with one that should be there. See picture below:
At the top of the list is Andrew Kitula and further down the list is Andrew Kitula, where he should only be there once.
Here is the strange bit.
When I click on a client further down the list, for a brief split second, the proper client name is displayed in the list before the view changes.
Using regular ion-list
If I switch back to the normal ion-list, the clients are displayed properly, but it takes ages to render.
Anyone here run into something like this? And should I create an issue on the the repo?
Incase you need it
Here is the code for filtered clients:
if (this.clients && val && val.trim() != ‘’) {
this.filteredClients = this.clients.filter((client) => {
return (
(client.name + ’ ’ + client.surname).toLowerCase().indexOf(val.toLowerCase()) > -1
|| (client.surname + ’ ’ + client.name).toLowerCase().indexOf(val.toLowerCase()) > -1
);
})
}
Solution:
This was a simple solution. For some reason the project I inherited had changeDetection: ChangeDetectionStrategy.OnPush in the parent component. This messed up the loading. So once I got rid of it, the view loaded exactly like I expected.