[BUG] The initialTopMostItemIndex cannot be scrolled to the bottom, the first frame rendering of the list has scrolling

[stefanJi]

Describe the bug

when set initialTopMostItemIndex, on the first frame, the previous content is rendered first

<Virtuoso
      style={{
        width: "100%",
        height: "100%"
      }}
      data={data}
      initialTopMostItemIndex={{ index: data.length - 1, align: "end" }}
      followOutput={"smooth"}
      itemContent={(index, item) => (
        <div
          key={item.message.clientId}
          style={{
            margin: "10px",
            background: "gray"
          }}
        >
          {getItemContent(item)}
        </div>
      )}
    />

Reproduction

https://codesandbox.io/s/virtuoso-demo-jump-gypfeh?file=/src/App.tsx

Screenshots

https://github.com/petyosi/react-virtuoso/assets/15273198/22455612-ee91-4430-9f4e-904ae3efd3c3

when from 3 swith to 4:	1	2	3	4	5

Desktop (please complete the following information):

• OS: MacOs
• Browser: chrome

Additional context Add any other context about the problem here.

[petyosi]

Take a look a this example: https://github.com/petyosi/react-virtuoso/blob/master/examples/chat.tsx. You need to reset the component when you load a new data set with the key property.

[stefanJi]

@petyosi I have set key at the parent component

<ChatRoom key={curRoom} cur={curRoom} data={list[curRoom]} />

After updating the demo and add key to virtuoso, the behavior is still the same.

<Virtuoso
      key={`chat-${cur}`}
/>

[petyosi]

True, I did not see that. I can't really distinguish if the blinking shows the previous content, or it's a matter of readjustment with the current data set. At any case, if you have variable sized items, you should use a default item height setting. I believe that this version works better.