Индикатор загрузки при работе с компонентом WaveSurfer (Angular)

Использую компонент ngx-spinner (для отображения индикатора загрузки) и компонент WaveSurfer в Angular проекте.

Появились некоторые проблемы с индикатором загрузки.

Первая проблема:

Когда загружаю аудиофайл и запускаю индикатор загрузки (метод spinner.show) - Индикатор отображается. После этого в отладчике вижу, что есть вход в событие this.wavesurfer.on 'ready' , но Индикатор продолжает крутиться. Индикатор спрячется после того, как кликнуть по экрану мышкой или свернуть окно и снова открыть.

import WaveSurfer from 'wavesurfer.js';
import { NgxSpinnerService } from "ngx-spinner";

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.scss']
})
export class PlayerComponent implements OnInit, OnDestroy {

constructor(private spinner: NgxSpinnerService) { }

...

listenwav(url:string){
  this.spinner.show();
  this.wavesurfer.load(url);
}

this.wavesurfer.on('ready', () => {
  this.spinner.hide();  
  this.wavesurfer.enableDragSelection({});      
  this.loadRegions(this.currentRec.markers);
  this.loadCloseButton();   
  this.wavesurfer.playPause();
});
...........
}

Вторая проблема: Использую инициализацию плагина для спектрограммы динамически. Индикатор начинает отображаться уже после того как спектрограмма загрузилась. Это может занять пару секунд (в зависимости от размера аудиофайла). Прячется индикатор также как и в 1м варианте (после клика и тп)

clickBtn(){
  this.spinner.show();
  this.initAndLoadSpectrogram();
  this.spinner.hide();
}

initAndLoadSpectrogram() {    
    this.wavesurfer.stop();
    this.wavesurfer.addPlugin(Spectrogram.create({
      container: "#wave-spectrogram",
      labels: true
    }));
    this.wavesurfer.initPlugin('spectrogram');    
    this.wavesurfer.play();
  }