[Sugestão] Carregando página-a-página ao invés de acumular

Que tal, ao invés de carregar os pensamentos de forma acumulada, carregar apenas o intervalo de pensamentos pertencente àquela página?

Criamos uma nova INTERFACE para incluir o "total" geral de pensamentos:

import { Pensamento } from './pensamento.interface';

export interface PensamentoPaginado {
    total: number;
    linhas: Pensamento[];
}

No serviço, acrescentamos um novo método levando em conta a nova Interface:

  listarPaginado(pagina:number=1, limite:number=6): Observable<PensamentoPaginado> {
    let params = new HttpParams().set('_page', pagina).set('_limit', limite);
    return this.http.get(this.API, {params, observe: 'response'}).pipe(
      map((res)=>{
        const total = Number(res.headers.get('X-Total-Count'));
        const linhas = res.body as Pensamento[];
        return { total, linhas };
      })
    );
  }

Tivemos que "ampliar" o escopo observável de "apenas o corpo" para "toda a resposta", pois, o servidor backend insere o TOTAL numa propriedade do cabeçalho de resposta (e não no corpo). Então, foi necessário mapear os dados da resposta para a nova interface.

Criamos um novo componente para representar um botão de "Reiniciar" (para que se possa voltar para a primeira página). A característica desse botão é que o seu ngIf é o NEGADO do haMaisPensamentos. Dessa forma, ele só aparecerá na última página. Inserimos esse novo componente no componente da tela de lista de pensamentos:

<app-botao-carregar-mais 
    [haMaisPensamentos]="haMaisPensamentos" 
    (click)="carregarMaisPensamentos()">
</app-botao-carregar-mais>
<app-botao-reiniciar-carregamento 
    [haMaisPensamentos]="haMaisPensamentos"  
    (click)="reiniciarMaisPensamentos()">Reiniciar
</app-botao-reiniciar-carregamento>

o Componente ListarPensamento ficou mais ou menos assim:

[........]

export class ListarPensamentoComponent implements OnInit {

  /** A nova Interface incluindo o total */
  paginado : PensamentoPaginado = {linhas: [], total: 0};
  pagina: number = 1;
  limite: number = 6;
  haMaisPensamentos: boolean = true;

  constructor(private service: PensamentoService) { }

  /** A subscrição do serviço */
  private carregarLista() {
    this.service.listarPaginado(this.pagina, this.limite).subscribe((paginado) => {
      this.paginado = paginado;
      this.haMaisPensamentos = paginado.linhas.length > 0;
    });
  }

  ngOnInit(): void {
    this.carregarLista();
  }

  /** Próxima página */
  carregarMaisPensamentos() {
    ++this.pagina;
    this.carregarLista();
  }

 /** Volta pra primeira página */
  reiniciarMaisPensamentos() {
    this.pagina = 1;
    this.carregarLista();
  }
}