Support adjust virtualized list to make scroll better

[vantoan8x]

How to adjust virtualized list "reactVirtualizedListProps" -> "overscanRowCount" property to make scroll better instead of blank at top and bottom while scrolling.

Thank

Ref: https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types

[nosferatu500]

Hi! Can you provide an example with this issue?

I have no any issues with blank spaces during scroll in my project.

[vantoan8x]

Dear @nosferatu500,

Example: There is a list of 1000 items,

1. When display, the list only renders N item (mayby 5 items on HTML DOM), example from position index 0 to 4.
2. You can scroll down, or scroll up, it show index from 5 to 9. the HTML DOM only contains 5 items (but index from 5 to 9). there are no any blank item after scroll, but scroll faster, the render seem to be slow at rendering next items and it appear flick a blank gap lightly.

........... 0 1 2 3 4 ........... 5 => I need 5 to 9 rendered also (it could be named "overscanRowCount" = 5, number items to be rendered also, 6 you can know as cached items). 7 8 9 ...........

Could you expose react-virtuoso -> overscan ? ref: https://virtuoso.dev/virtuoso-api-reference/

[nosferatu500]

@vantoan8x Hello! Sorry for that delay. I was too busy last week.

Thanks for the link and explanation. I will release a new build soon.

[vantoan8x]

Thank you alot @nosferatu500 !

[nosferatu500]

@vantoan8x v4.1.0 has been released. Let me know if everything is ok.

[vantoan8x]

Dear @nosferatu500, after install update to 4.1.0 the bug still remianing, let see the video I attached below:

See the Blank screen when I move up and down by touch pad scrolling/swipe: https://drive.google.com/file/d/1yhU-ENNFaWQ4wSB0Wzk-ogP6nXrphKjc/view?usp=sharing

https://user-images.githubusercontent.com/953230/160971932-ab9ea7e2-0eee-4b11-86ea-e368634a313f.mov

[vantoan8x]

I tried with increaseViewportBy, and overscan, those worked wrong in their document. ex: https://codesandbox.io/s/esdng?file=/src/App.tsx I added more lines code:

      overscan={{main: 1000, reverse: 1000}}
      totalCount={1000}
      increaseViewportBy={{top: 200, bottom: 200}}

Still not work:

[nosferatu500]

Well, this happened with React 18. I'm not sure when, but I'll fix it.

[vantoan8x]

Thank you alot nosferatu500!

On Mon, Apr 25, 2022, 14:32 Vitalii Shvetsov @.***> wrote:

Well, this happened with React 18. I'm not sure when, but I'll fix it.

— Reply to this email directly, view it on GitHub https://github.com/nosferatu500/react-sortable-tree/issues/19#issuecomment-1108183086, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHIXDQMKUQQOXTIMEZYSYTVGZDADANCNFSM5RJQJAOA . You are receiving this because you were mentioned.Message ID: @.***>

[vantoan8x]

Thank you alot @nosferatu500 I wrote new one for me to use!

[nosferatu500]

Glad to hear. I also don't plan to work on this fork anymore and have already started working on a completely new solution. Mostly because this package does not meet all the requirements of my current project. It seems to be easier to write your own component than to maintain this one. @vantoan8x

[vantoan8x]

Thank you alot @nosferatu500, you did a great job! 👍

If you want to use this component, ping me, I can always welcome to send you this component (not any dependencies).

It looks like: