Primeng: DataTable with Virtual Scroll flickers

[wooleverj]

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
http://plnkr.co/edit/V3JY3MASoc1Dh2pm5IJO?p=preview

https://www.primefaces.org/primeng/#/datatable/scroll

Related to this support request:
https://forum.primefaces.org/viewtopic.php?f=35&t=51675&sid=997449c59e643d44aed79a1461037caf

Current behavior
When using the table with virtual scroll, if you scroll down to where the lazy load gets fired the table will continually fire the lazy load event. This causes the table to flicker with data loading and never actually complete loading the data until you scroll further down or back up to before the lazy load event fired. This appears to only be an issue when the viewport is showing part of the original loaded data and part of the new loaded data.

Expected behavior
The expected behavior is for the the data to load to the table without continually firing the lazy load event.

Minimal reproduction of the problem with instructions
You can clearly see the issue on the example virtual scroll table in the demo. If you scroll the second table to the point in which lazy load event occurs the table will flicker and never complete loading.

What is the motivation / use case for changing the behavior?
Table loading is not working properly.

Please tell us about your environment:
Windows 2010, Visual Studio Code, node.js, npm

• Angular version: 2.0.X
  4.0 +

• PrimeNG version: 2.0.X
  Checked this issue with 4.0.3, 4.1.0-rc2, 4.1.0-rc3, 4.1.0 and it seems to manifest in all of them.

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Chrome 59
  

• Language: [all]

[filip12345678910]

It works in Firefox, but not in Chrome.

[machfalcon]

Looks like the scroll event is firing when it shouldn't which is causing the table to continuously scroll down when the first lazyLoad event is fired. There are a couple of issues that seem to be causing this:

1. ScrollableView.prototype.ngAfterViewChecked - the call to this.alignScrollBar() causes the scroll event to trigger which causes this.bodyScrollListener to fire. The issue might be in the alignScrollBar() function or the bodyScrollListener function.

2. DataTable.prototype.ngAfterViewChecked - the last line in the second if block looks like it should be setting this.totalRecordsChanged = false otherwise that block of code will re-execute every time ngAfterViewChecked is fired.

[aabruc]

Hi,
I'm working with LazyLoad and scrolling and do struggling with this behavior, too.
I mainly work with Firefox, but unfortunatley there is the same strange behavior.
If you could fix this as soon as possible I would be happy, because this functionality is much-needed for our program. :)
thx.

[fehart]

Dear PrimeNG team,
I'm using LazyLoad with scrolling in my project as well.
I have the same strange behaviour in IE(11), Edge, Chrome and Firefox ... With this bug it's not really usable :(

When do you think will you fix this issue? Is it already planned for an upcoming version?
I'm really looking forward for this bugfix! :)

Thank you!

[cagataycivici]

Can you guys check this with 4.1.3?

[aabruc]

Hi!
I've got 4.1.3, but unfortunately there is no improvement. The table content still flickers when you scroll and when you reach the last element, the scrollbar does not fit, its too long.

[wooleverj]

I also upgraded to 4.1.3 and did not see any improvement to the data table flickering.

[ekoch]

Same issue for me, still not working in 4.1.3

[fehart]

same here, still not working with 4.1.3 :(

[filip12345678910]

You have to scroll slowly.

[fehart]

But we can't ask our users to scroll slowly ... ;)
Also it doesn't work correctly if you scroll slowly!

[filip12345678910]

You have to scroll slowly to make the bug work. When I scroll fast the bug doesn't happen.

[fehart]

Ah, ok.
Well, for us it doesn't work correctly if you scroll fast or slowly ...

[cagataycivici]

I'll add a timer so that if the user scrolls too fast, we don't call lazy load.

[goluhaque]

Upgraded to 4.2.0 and the flickering is still there. Just scroll to the point when new data is supposed to be loaded. Any updates?

https://plnkr.co/edit/CoSqvdoZkVnA4vDpSMWD?p=preview

[fehart]

Works better if you scroll fast - but it's still flickering and "jumping" when you scroll slowly.

[filip12345678910]

Maybe we should make a video if he doesn't understand.

[goluhaque]

We could make a video, but I don't think the issue is too hard to verify or a working solution too hard to test.

[filip12345678910]

But cagataycivici seems to have no idea what are we talking about.

[aabruc]

I guess he knows what we talking about, because after the bugfix it works much better:
The scrollbar size is calculated right, the content is loaded correctly, the last element can be reached and it stops at the last element.
That wasn't the case in the version before.

But it needs an improvement: When you scroll with mousewheel and scroll slowly, it's still flickering and jumping. So much so that you feel the content is not loaded properly.

[filip12345678910]

"The scrollbar size is calculated right, the content is loaded correctly, the last element can be reached and it stops at the last element." This worked for me even in the previous versions. I am using Windows 10.

[ekoch]

Still not working for me

[ekoch]

Any news on this? Will it be fixed and when? Or do we have to post a new issue?

[aabruc]

I opened a new ticket: https://github.com/primefaces/primeng/issues/4029, because this is already closed and so our last comments are probably ignored.

[SRICHANDANCHINNAM]

Hi Folks,

I am facing a difficult situation in Primeng Table..

I have 765 Records in my database and at a time we are loading 100 records and on scroll we will fetch next 100 records..

The issue over here is, username a_oo is first row in my table... i scrolled to bottom of table and now i am at 765th record...Now i am applying filter on username with a_oo... In this case Lazyload event is calling multiple times with different events...

I here attached the images also for clear [understanding..]
(https://postimg.cc/GT3CZNDp)
(https://postimg.cc/ctLpD3qg)

Can you please help me out..
@cagataycivici or any one