Gists for the post - https://rizwaniqbal.com/posts/paginating-firestore-collections-with-snapshot-listeners/

SyncCards.ts

export interface ObservablePaginatedResult {
	cards: Observable<Array<SomeCards>>;
	stop: () => void;
}

// returns an observable to subscribe to for changes and a method to stop listening to the snapshot
public SyncCards(pageSize: number = this.DefaultPageSize): <ObservablePaginatedResult> {

    // an internal subject to handle streaming until the connection is closed. The buffer size of 1 fits my scenario and is up to the readers discretion
    const cards$: ReplaySubject<Array<SomeCards>> = new ReplaySubject<SomeCards[]>(1);

    // create a query for Firestore
    const query = this.cardsCollRef.orderBy('priority', 'desc').limit(pageSize);

    // create a snapshot query to get cards in descending priority
    const stopListening = query.onSnapshot((cardSnapshot) => {
        const cards: SomeCards[] = [];
        cardSnapshot.forEach((cardDoc) => {
            cards.push(cardDoc.data() as SomeCards);
        });
        cards$.next(cards);
    });

    return {cards: cards$.pipe(distinctUntilChanged()), stop: stopListening};
}