Scroller: Scrolling Backward creates elements for ALL the items

[mconner]

Describe the bug

When scrolling backward to the beginning of a list of items (e.g.: after scrolling to the end), All the items are created though they are not needed.

Environment

Windows 10

Reproducer

https://stackblitz.com/edit/github-1wbs9k?file=src%2Fapp%2Fapp.component.html

Angular version

17.1.1

PrimeNG version

17.4.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.10.0

Browser(s)

Edge 121.0.2277.83,

Steps to reproduce the behavior

1. Open the browser developer tools, and look at the console.

2. Click on "Scroll to Last", note that it will display the last few items and log a few more in the console -- roughly 9994 to 9999 -- as expected. It does NOT log the other items (8 or so to 9993). Again, as expecteD:

3. Click on "Scroll to First". Unlike the first case, ALL the items -- 0-9999 or so -- are created, and then thrown away (except the first few needed to display the first items):

This significantly slows the rendering for large datasets. Since Scroller is used in the Tree component -- which uses a UITreeNode component instance for each node, and templates which might themselves contain component references or at least DOM elements in the tree -- rendering can take close to half a minute for a large amount of data.

Expected behavior

Elements (or components) for items in the scroll container should not be generated if they are unneeded, as this can greatly increase the time to render.

[mconner]

Here's an admittedly hacky workaround: https://stackblitz.com/edit/github-1wbs9k-5rxjo9?file=src%2Fapp%2Fapp.component.ts This is a fork of the reproducer. Before calling sc.scrollToIndex(), I set the scroller's last to be no more than numItemsInViewport + d_numToleratedItems ahead of the intended new first. This seems to work for the simple case of a vertical scroller. I haven't tried it in the context of a Tree, yet.

[cetincakiroglu]

Hi,

Strangely, I've just copied your code and put it in 17.7.0 example and it works as it should. Now it logs only the values in the range.

Could you please check it https://stackblitz.com/edit/jxmecc?file=src%2Fapp%2Fdemo%2Fscroller-basic-demo.html,src%2Fapp%2Fdemo%2Fscroller-basic-demo.ts

[cetincakiroglu]

Moving to the next milestone while waiting the feedback.

[mconner]

Strangely, I've just copied your code and put it in 17.7.0 example and it works as it should. Now it logs only the values in the range.

Could you please check it https://stackblitz.com/edit/jxmecc?file=src%2Fapp%2Fdemo%2Fscroller-basic-demo.html,src%2Fapp%2Fdemo%2Fscroller-basic-demo.ts

I forked my original reproducer stackblitz and upgraded to 17.7.0 , and that fixed the problem. So, one of the recent releases must have fixed it.

[cetincakiroglu]

Hi,

Thanks for the feedback, I'm closing the issue since it's already fixed.