Initial index render? - Without using scrollToIndex?

[AdlerJS]

This didn't seem like an issue so just asking the community for help. I have a chat (text message) type UI that I have virtualized using measureElement. We have a search feature where people can search previous messages and click the message with the goal being to bring that message into view. Right now we are using the virtualized list -> finding the selected message index -> using scrollToIndex to scroll that message into view.

The issue I'm running into is that some of these chat's are several years old, so you can imagine there is 1000s of messages. So if the user clicks an old message (several years back) in some instances we are seeing scroll times of over 30 seconds to scroll to the message.

Is the a way to simply render the list at a given index or offset without having to scroll?. Even if we have to unmount or remount the list or show a loading spinner?

[mpduyanh]

Hi Adler,

I don't have answers but interested in how you implement the scroll to an index. I'm implementing an app similar to yours. My app displays a txt file using virtual scrolling and it has a search feature where user can search then scroll to the text being searched. I'm trying to find a way to search and scroll to the text. Could you help me please?

[malay44]

Hey @AdlerJS, have you found a solution?

EDIT:-
For those looking for a solution, you can pass initialOffset to useVirtualizer as shown below.

  const optionVirtualizer = useVirtualizer({
    count: options.length,
    getScrollElement: () => commandListRef.current,
    estimateSize: () => 35,
    initialOffset: initialIndexRender ? initialIndexRender * 35 : 0,
  });