Support for "chat" like use cases

[piecyk]

Let's start conversion about implementation guidelines.

[piecyk]

@piecyk I'll work on a sandbox, but I have a couple questions about your implementation I want to make sure I understand. I see that you're adjusting the scrollOffset when new items are fetched using:

const nextOffset =
virtualizerRef.current.scrollOffset + pageSize * itemSize;

virtualizerRef.current.scrollOffset = nextOffset;
virtualizerRef.current.calculateRange();

virtualizerRef.current.scrollToOffset(nextOffset, { align: "start" });

For the pageSize * itemSize calculation, this seems very dependent upone knowing the item size. Or at least having a very good estimate. What about cases where the items can be very different sizes? Wont this cause scroll issues?

What does virtualizerRef.current.calculateRange(); do?

Originally posted by @lexahall in #400 (comment)

[piecyk]

For the pageSize * itemSize calculation, this seems very dependent upone knowing the item size. Or at least having a very good estimate. What about cases where the items can be very different sizes? Wont this cause scroll issues?

@lexahall overall here is important to have same estimation that is used in estimateSize as we don't know real sizes of rows this will scroll to correct offset, and when we got real sizes the scroll will be adjusted automatically

What does virtualizerRef.current.calculateRange(); do?

it will update what range is visible using scrollOffset that was just set,

[lexahall]

Thanks for explaining. Is there a benefit for using using offset rather than index here? If we know the page size added, wouldn't we know the new index we need to scroll to?

I'm trying to track down the two issues I'm seeing for my chat implementation, which are:

1. when I first load it does not always scroll to the bottom
2. when a new message is sent it does not always scroll to the bottom

I had a hunch these issues were both related to the scrollOffset calculation. but I could be wrong.

I'll work on getting a sandbox with an example set up so you can take a look too.

[piecyk]

Is there a benefit for using using offset rather than index here? If we know the page size added, wouldn't we know the new index we need to scroll to?

The benefit is that if we do it in same render when we got the data, then we will render correct range, rather rendering first then jumping to correct place.

when I first load it does not always scroll to the bottom

question is what first load, data or page?

when a new message is sent it does not always scroll to the bottom

how do you update the data, are you using optimistic update, or fetching updated data from server?

[joseandro]

The benefit is that if we do it in same render when we got the data, then we will render correct range, rather rendering first then jumping to correct place.

How do we ensure that we are working on the same render that I update the data on?

[lexahall]

The benefit is that if we do it in same render when we got the data, then we will render correct range, rather rendering first then jumping to correct place.

Makes sense, thanks!

question is what first load, data or page?

Technically the data, but it's a little funky in my case. Basically we will have fetched the most recent message for each chat before you even enter the chat. Meaning that when you enter, exactly 1 piece of data is loaded, then the page loads, and as the page loads, we fetch the first "page" of chat history (which is up to the last 100 messages).

how do you update the data, are you using optimistic update, or fetching updated data from server?

We do an optimistic update, then get the updated data from the server when it's available.

[SomiDivian]

anything new on this

[melbourne2991]

Love tanstack and react-virtual, but looks like this is still in progress, if anyone else here needs an alternative in the meantime - react-virtuoso seems to be one of the few virtualized libraries that does support this:

https://virtuoso.dev/prepend-items/

[stefanJi]

When this can be merged?

[underbleu]

please merge this feature

[issimin]

Love react-virtual,Has anyone successfully used it in cases like chat?

[mechanicalbot]

example with chat-like layout #195 (comment)