Virtuoso Message List Tutorial - Loading Older Messages

Part 3 - Loading Older Messages

In this part, we will automatically load older messages when the user scrolls near the top of the list. We will do that by adding an event handler to the onScroll component property.

onScroll Event Handler

The onScroll event handler receives a ListScrollLoaction object as a parameter. The object contains several fields that denote the current state of the list. In this case, we are going to look at the listOffset - the distance from the top of the list to the top of the viewport. The value is 0 when the list is scrolled all the way to the top, and -N when the list is scrolled N pixels down. We will start loading the newer messages when the scroll position is near the top (> -100). Our handler should look like this:

tsx

The implementation above uses the imperative data API of the component to prepend a set of messages at the top of the list. Calling the prepend method automatically adjusts the scroll position to keep the list in the same visible position.

Let’s add the event handler to the VirtuosoMessageList component:

tsx

Notice that we’re also going to add the loadingNewer flag into the context prop, so we are updating the MessageListContext interface to include it.

Loading Indicator

The code above introduced an additional state flag - loadingNewer. This flag prevents the component from loading messages when the previous request is still in progress. We’re going to make an additional use of this flag by displaying a loading indicator at the top of the list when the component is loading older messages. We are going to make a custom Header component for that purpose. Declare the Header component next to your EmptyPlaceholder:

tsx

Then, add the component to the VirtuosoMessageList props:

tsx

If everything works as expected, you should see ‘Loading…’ when you scroll near the top of the list, and older messages should be loaded.