user1656204
user1656204

Reputation: 131

How to prevent elements from blinking on each API call in an interval while data is updating

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

Answers (3)

user1656204
user1656204

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

SnorreDan
SnorreDan

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

Julien Verneaut
Julien Verneaut

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

Related Questions