Floating timestamp according to visible messages in list

[itayganor]

Hi!
Do you know that feature in WhatsApp (or Telegram or other IM platforms) where there's a blue sticky bubble that shows the date of the conversation? And when you scroll past a bubble, the sticky one changes its value?

(screenshots are stolen from this thread)

That's exactly what I'm trying to implement (except each message updates the bubble, instead of only when the day has changed).

Implementation methods

I was thinking about using VirtuosoGroup but it's not a group, just a floating bubble that shows the current date.

Then I thought maybe I could utilize rangeChanged to know which message index is currently being rendered at the top - but since I have to use overscan, and rangeChanged includes overscan, I can't.

Following @petyosi's demo on #118 I tried to use IntersectionObserver to know when a message goes out of the screen. The given demo in that issue isn't exactly working, So with help from this thread, I made this:

https://codesandbox.io/s/messages-list-intersection-observers-ifjc3?file=/src/MessageList/Message.tsx

As you can see it's almost working- but doesn't work very well if you scroll too fast, and its behavior is really weird when scrolling up.

---

It feels like listening to scroll events on the scrollable container is the only choice, but it's difficult to calculate the current topmost visible message because the rows are windowed by Virtuoso.

Do you have an idea of a possible way to implement this wonder?

Thanks! <3

[petyosi]

Why not groups? If you make the group transparent and center the contents it should work like WhatsApp. It will also have the scrolling dividers stick to the header.

[itayganor]

Groups could fit but I need the scroll position anyway to scroll-sync another chat screen (on the other half of the screen) according to the current position.

[petyosi]

I need to make reverse scrolling and item prepending properly working in grouped mode...

[isBatak]

@petyosi do you have any update on item prepending in grouped mode?
Currently, I'm getting this error Error: Virtuoso: prepending items does not work with groups.