[Dúvida] Ação do botão

Na ação do botão "Carregar mais" vem sempre 6 pensamentos e fica numa espécie de looping. Versão do JSON Server 0.17.4.

listar-pensamento.component.html

<section class="container">
  <header class="header d-flex">
    <h2 class="ff-inter">Meu Mural</h2>
    <button routerLink="/criarPensamento" class="botao">Adicionar pensamento</button>
  </header>
  <div class="mural" *ngIf="listaPensamentos.length > 0; else semPensamentos">
    <div *ngFor="let pensamento of listaPensamentos">
      <app-pensamento [pensamento]="pensamento"></app-pensamento>
    </div>
  </div>
</section>

<app-botao-carrega-mais
  [haMaisPensamentos]="haMaisPensamentos"
  (click)="carregarMaisPensamentos()"
></app-botao-carrega-mais>

<ng-template #semPensamentos>
  <div class="ff-inter sem-pensamentos">
    <p>Ainda não há pensamentos cadastrados</p>
  </div>
</ng-template>

listar-pensamento.component.ts

import { Component, OnInit } from '@angular/core';
import { Pensamento } from '../pensamento';
import { PensamentoService } from '../pensamento.service';

@Component({
  selector: 'app-listar-pensamento',
  templateUrl: './listar-pensamento.component.html',
  styleUrls: ['./listar-pensamento.component.scss']
})
export class ListarPensamentoComponent implements OnInit {
  public listaPensamentos: Pensamento[] = [];
  public haMaisPensamentos = true;

  private paginaAtual = 1;

  constructor(
    private pensamentoService: PensamentoService,
  ) { }

  ngOnInit(): void {
    this.pensamentoService.listar(this.paginaAtual).subscribe((listaPensamentos) => {
      this.listaPensamentos = listaPensamentos;
    });
  }

  public carregarMaisPensamentos(){
    this.pensamentoService.listar(++this.paginaAtual)
      .subscribe(listaPensamentos => {
        this.listaPensamentos.push(...listaPensamentos);

        if (!listaPensamentos.length){
          this.haMaisPensamentos = false;
        }
      }
    )
  }
}

pensamento.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Pensamento } from './pensamento';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class PensamentoService {
  private readonly API = 'http://localhost:3000/pensamentos';

  constructor(
    private http: HttpClient,
  ) { }

  public listar(pagina: number): Observable<Pensamento[]> {
    const itensPorPagina = 6;
    let params = new HttpParams()
      .set("_page", pagina)
      .set("_limit", itensPorPagina);

    return this.http
      .get<Pensamento[]>(this.API, { params });
  }

  public criar(pensamento: Pensamento): Observable<Pensamento> {
    return this.http.post<Pensamento>(this.API, pensamento);
  }

  public editar(pensamento: Pensamento): Observable<Pensamento> {
    const url = `${this.API}/${pensamento.id}`;
    return this.http.put<Pensamento>(url, pensamento);
  }

  public excluir(id: string): Observable<Pensamento> {
    const url = `${this.API}/${id}`;
    return this.http.delete<Pensamento>(url);
  }

  public buscarPorId(id: string): Observable<Pensamento> {
    const url = `${this.API}/${id}`;
    return this.http.get<Pensamento>(url);
  }
}