I have a long data set and I need to visualize them in a table. The data consists out of 50k rows and the data is already available locally.

For this I use an infinite scroll implementation but any attempt results in a flicker as you can see in the recording below.

The layout is semi-complex as it is a table with an icon and a couple of columns. I use Angular but the problem seems to be more rooted into how a Browser operates as I can find the same behaviour in other frameworks as well.

Here are two examples that I found that showcase the issue perfectly. One with React, the other with Angular.

https://rawgit.com/bvaughn/react-virtualized/master/playground/grid.html

https://stackblitz.com/edit/angular-ivy-k3hmzh?file=src%2Fapp%2Fapp.component.ts

Here is a single frame while scrolling that shows that the browser can't catch up with building the table

TLDR

What is the best approach to avoid flickers while scrolling? Is there a way to slow down or throttle the scrolling behaviour to avoid this issue?