VirtualScroll with lazy load async: data flickers on new data arrival

[olingerc]

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)

Plunkr showing the premature scroll top change. Scroll down and watch how the data (in this case the years) "flickers".

http://plnkr.co/edit/OSh9yQI1BnXV4Uxei4tX?p=preview

Current behavior
When using virtualScroll together with a lazy load function the table has its scroll top changed at the same time that a lazy load event is fired. As soon as the lazy load event returns the new data will then update the old rows. Depending how long this async event takes we still see the old data before the new arrives.
This is not visible in the example since there the lazyload function is not async and the same data is always returned. Adding a setTimeout reveals the bug.

Expected behavior
The scroll top should only be adjusted after the new data has arrived.

Minimal reproduction of the problem with instructions
Use lazy load with virtualScroll and an async lazy load function.

• Angular version: 2.0.X
  4.01

• PrimeNG version: 2.0.X
  4.0.2

[olingerc]

My current "hacky" solution: put the _this.scrollTable.style.top code in a setTimeout with 100 ms. Of course this is not really viable.

[olingerc]

Just as inspiration. In an old project I used jQuery datatables and their lazy load implementation was really "smooth".

[cagataycivici]

p-dataTable is deprecated and will be removed in favor of the new p-table (aka TurboTable) of 5.1.0 so closing the issue. Please try the new p-table once 5.1.0 is released.