Angular: Duplicating Data Issue in Angular Firestore Pagination and InfinityScroll

Question

I am facing an issue in an Angular application where I use Firestore for paginating and displaying chat messages. The problem arises when a new message arrives (data), and the existing paginated data gets duplicated.

I have implemented a pagination mechanism using Firestore in my Angular application. Initially, I load the first set of messages and display them. When scrolling up, additional messages are paginated and displayed correctly. However, when a new message arrives, the existing paginated messages get duplicated.

Here's a high-level overview of my implementation: Source Code Stackbliz

1. Initial load fetches the first set of messages, and this.allMessage is updated.
2. When scrolling down, more messages are paginated, and this.allMessage is updated again.
3. On receiving a new message, I update this.nuevosMensajesState.lastVisibleDoc.
4. The issue occurs when scrolling down after the new message arrives, leading to duplication of messages in this.allMessage.

Here's a snippet of my Angular service and component:

First, create two behaviorSubject

The first observable is responsible for listening when I receive new messages

private newMensaggesState: State = {
    groupMessageIndex: 1,
    maxMessageSize: 10,
    lastVisibleDoc: null,
    isNewMessageEmit: false,
  };
     private _newMensaggesSubject = new BehaviorSubject<State>(
    this.newMensaggesState
  );
  readonly newMessagesChanged$ = this._newMensaggesSubject
    .asObservable()
    .pipe(distinctUntilChanged());

The second observable is responsible for listening when the scroll directive is activated, I manage the scroll with the ngx-infinite-scroll library

    private paginatedMessagesStates: State = {
    groupMessageIndex: 1,
    maxMessageSize: 10,
    lastVisibleDoc: null,
    isNewMessageEmit: false,
  };

 private _paginatedMessagesSubject = new BehaviorSubject<State>(
    this.paginatedMessagesStates
  );
  readonly mensagessPaginatedChanged$ = this._paginatedMessagesSubject
    .asObservable()
    .pipe(distinctUntilChanged());

Now, create the separate states, since I need to be listening to the messages in real time and when you page them into a declarative function, the listening is lost, which is why the two states are created. For this reason, I separated the functions into a single responsibility, I did a lot of research on the subject but some in the community mentioned that it is not that easy to do so this was a solution that I found

Then, at the beginning of the component, the first method in the service is called, which obtains the first ten elements and updates when resolved.

    this.newMensaggesState.lastVisibleDoc = lastVisibleDoc;

So when the scroll directive is called it already has updated both the index group and the last document when it is called, then the message list this.allMessages concatenates the result

It brings up the pagination and the list becomes empty because there are no more items to bring, but at that moment a new message is received, that is where the items are duplicated

If someone can help me please, I have been trying in every way I just need to find a way to reset the pagination to avoid this duplication, or some way to control when a new message comes in

I suspect the problem lies in how I handle the state and paginated data when a new message arrives. I would appreciate any insights or suggestions on how to address this duplication issue.

Thanks in advance for your help! I would really appreciate it if someone could give me a light on the way. Please

firebase-angular version: "^16.0.0"