search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.25k stars 301 forks source link

for reverse scrolling, the list doesn't load more when new items added #306

Closed mchitson closed 3 years ago

mchitson commented 3 years ago

Hi does this work when the list changes /expands? couple of issues:

  1. in reverse mode i need firstItemIndex it seems, i however do not know ahead of time how many items i would have. how to solve this?
  2. when i append to the list (like say in a chat example) i can no longer scroll more when i scroll to the top.
petyosi commented 3 years ago
  1. You can use a very large number and decrement it;
  2. Not sure I understand what the problem is. Please provide a reproduction in codesandbox; - I will re-open the issue once I can look into it.
mchitson commented 3 years ago

Hi thank you I managed to get it working. Thank you so much! It’s a hell of a lot easier than ReactVirtualized.

Just a quick question, since we need to set the firstItemIndex and I don’t know at the beginning how many records I will be loading, I can set it to an very large number for arguments sake 10,000. What happens if I end up with number of records > 10k? What is the significance of the firstItemIndex, having it extremely large doesn’t impact memory/performance or anything does it?

On Feb 26, 2021, at 12:26 PM, Petyo Ivanov notifications@github.com wrote:

You can use a very large number and decrement it; Not sure I understand what the problem is. Please provide a reproduction in codesandbox; - I will re-open the issue once I can look into it. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/petyosi/react-virtuoso/issues/306#issuecomment-786784324, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALSSPFXX5KEJNMSXFMOW723TA7KV7ANCNFSM4YIXLHFA.

petyosi commented 3 years ago

the first item index is used internally for calculations - and it has certain boundaries which I should be able to fix at some point (hence the necessity of it being above zero). Using a large number (1M) has no negative performance.

mchitson commented 3 years ago

Great. One more question (sorry), it seems the endless scroll triggers endMore on first load as well so that I am loading twice the amount of data am expecting. Is there a way to ensure endMore loads only on scroll?

That’s my code:

displayUsers = (users) => { return ( <Virtuoso className='users-container' data={users} components={{Footer: () => (this.state.loadingMore && this.state.hasMore) ? <div style={{display: 'flex'}}><Spin style={{margin: 'auto'}}/>

: null , }} endReached={this.handleInfiniteOnLoad} overscan={100} itemContent={(index, user) => { return ( <a style={{textDecoration : 'none'}} onClick={()=>this.props.handleUserClick(user)}>

{user ? user.avatar : null}} title={user.name} description={user.organization} /> )}} /> ); } .css: .users { height: 100%; //display: flex; //flex-direction: column; .user-list { height: 100%; overflow: auto; padding: 0px 5px; //display: flex; //flex-direction: column; .users-infinite-scroll { //display: flex; //flex-direction: column; height: 100%; .users-container { height: 100%; } } .ant-list-item { padding: 6px; } .ant-list-item-meta-title { margin-bottom: 0px; } } > On Feb 27, 2021, at 1:45 PM, Petyo Ivanov wrote: > > > the first item index is used internally for calculations - and it has certain boundaries which I should be able to fix at some point (hence the necessity of it being above zero). Using a large number (1M) has no negative performance. > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub , or unsubscribe . >
mchitson commented 3 years ago

Hi

Me again, when I scroll by mouse through my virtualized list, sometimes the whole list goes blank for a while before it renders it. It’s quite a noticeable lag. Is there anything that can be done?

On Feb 28, 2021, at 6:09 PM, Michele Chitson mchitson@gmail.com wrote:

Great. One more question (sorry), it seems the endless scroll triggers endMore on first load as well so that I am loading twice the amount of data am expecting. Is there a way to ensure endMore loads only on scroll?

That’s my code:

displayUsers = (users) => { return ( <Virtuoso className='users-container' data={users} components={{Footer: () => (this.state.loadingMore && this.state.hasMore) ? <div style={{display: 'flex'}}><Spin style={{margin: 'auto'}}/>

: null , }} endReached={this.handleInfiniteOnLoad} overscan={100} itemContent={(index, user) => { return ( <a style={{textDecoration : 'none'}} onClick={()=>this.props.handleUserClick(user)}>

{user ? user.avatar : null}} title={user.name} description={user.organization} /> )}} /> ); } .css: .users { height: 100%; //display: flex; //flex-direction: column; .user-list { height: 100%; overflow: auto; padding: 0px 5px; //display: flex; //flex-direction: column; .users-infinite-scroll { //display: flex; //flex-direction: column; height: 100%; .users-container { height: 100%; } } .ant-list-item { padding: 6px; } .ant-list-item-meta-title { margin-bottom: 0px; } } > On Feb 27, 2021, at 1:45 PM, Petyo Ivanov > wrote: > > > the first item index is used internally for calculations - and it has certain boundaries which I should be able to fix at some point (hence the necessity of it being above zero). Using a large number (1M) has no negative performance. > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub , or unsubscribe . >