Reputation: 131
A JSON array got from an API call is supposed to be displayed in cards using ionic 5 and Rxjs. The API is being called every 5 seconds, so the data will be changed on each call. The problem is that on each call the whole cards will be regenerated and looks bilking to the user. Here is how I'm calling the API:
interval(1 * 5 * 1000)
.pipe(
flatMap(() => this.myService.getList())
)
.subscribe(res => {
if(res){this.list = res.history;}
})
In html file, the data is displayed on cards using "ion-virtual-scroll" like below:
<ion-virtual-scroll [items]="list" approxItemHeight="132px">
<ion-item *virtualItem="let q">
<!-- cards will go hear -->
</ion-item>
</ion-virtual-scroll>
Any help will be appreciated :)
Upvotes: 0
Views: 990
Reputation: 131
Finally it's been fixed, by adding itemHeight, so the code in html file would be:
<ion-virtual-scroll [items]="filteredList" approxItemHeight="152px" [itemHeight]="itemHeightFn"> ...
and in .ts file:
itemHeightFn(item, index) {return 182;}
So, the virtual scroll doesn't make items blinking while getting updated. It solved the issue in my case since all my items have the same height.
Hope it helps someone!
Upvotes: 1
Reputation: 2890
You could use Angular's "trackBy" function to achieve this: https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5
This is also mentioned in the documentation for ion-virtual-scroll: https://ionicframework.com/docs/api/virtual-scroll#changing-dataset-should-use-trackby
Upvotes: 0
Reputation: 348
You can add the distinctUntilChanged
operator to prevent any unnecessary DOM update. https://www.learnrxjs.io/learn-rxjs/operators/filtering/distinctuntilchanged
Upvotes: 0