Dúvida - Subscribe / Obervable | Angular

Pessoal, boa tarde. Conseguem me ajudar? Tenho aqui um implementação em um componente de um service via subscribe a uma api REST:

component.ts:

  abrirModalEditarConteudo(template: TemplateRef<any>, conteudo: Conteudo) {
    this.obterDadosCombosCadastroConteudo();

    this.isFormSubmitted = false;
    this.modoCriacao = false;
    this.conteudoForm = new ConteudoForm();
    this.administrativoService.obterConteudoPorId(conteudo.id).subscribe((result) => {
      this.conteudo = result.data[0];
      this.prepararDadosEdicao(result.data[0]);
      this.modalConteudo = this.modalService.show(template,
        {
          class: 'modal-dialog-centered modal-lg modal-conteudo',
          animated: false
        }
      );
    });
  }

service.ts:

  obterConteudoPorId(id: string){
    return this.http
      .get<any>(this.urlApi + '/v1/administracao/conteudos/' + id)
      .pipe(catchError(this.handleError));
  }

O que está acontecendo? Existe um loader genérico na aplicação que toda classe herda. Ele fica num BaseService. Então, para toda requisição via service (arquivos do projeto mesmo), esse loader é chamado. Acontece que, nesse caso, a experiência está bem ruim e eu não estou conseguindo identificar o erro.

Reparem que há uma chamada ao serviço. Esse serviço devolve um base64, que pode ser até 20mb, entre outras informações. Para deixar mais claro, guardamos esse base64 no blob storage do Azure. Esse é um problema mais de infra, por isso não vou me ater a esse detalhe.

O principal ponto é que quando cahamados esse método abrirModalEditarConteudo, ele vai na api, retorna os dados e os exibe numa modal, conforme vocês podem ver no primeiro trecho do código. Porém o click no botão de editar causa um efeito negativo para o usuáro, pois o loader aparece muito rápido, a aplicação fica parada (porém, com a tela normalmente navegável) e, depois de alguns segundos, o modal abre com as informações.

Gostaria de saber e aprender alternativas para "amarrar" esse loader (posso até eliminar o genérico que mencionei) ao retorno da api, ou seja, permanecer com a experiência de que algo está sendo carregado e mostrar o modal apenas no final do request, de fato. Acredito que seja alguma implementação incorreta do subscribe que fizeram no código.

Desde já, agradeço!

Resolvi aqui aninhando as chamados e utilizando o firstValueFrom do rxjs. Condicionei algumas chamadas:

    this.obterDadosCombosCadastroConteudo().then(result => {

      let dadosCombosCadastros = result.data;
      dadosCombosCadastros = this.exporCaminhoCategorias(dadosCombosCadastros);
      this.dadosCombosCadastros = dadosCombosCadastros;

      firstValueFrom(this.administrativoService.obterConteudoPorId(conteudo.id)).then(result => {

        this.isFormSubmitted = false;
        this.modoCriacao = false;
        this.conteudoForm = new ConteudoForm();

        this.conteudo = result.data[0];
        this.prepararDadosEdicao(result.data[0]);
        this.modalConteudo = this.modalService.show(template,
          {
            class: 'modal-dialog-centered modal-lg modal-conteudo',
            animated: false
          }
        );
        this.loaderService.dequeue('loading')
      });
    });

Não sei se foi o melhor caminho, mas resolveu.