Wavesurfer how to load some fake peaks before loading the real peaks

Let's say we have a wavesurfer-js player like this:

wavesurfer = WaveSurfer.create({
   container: document.querySelector('#lovelyContainer'),
   backend: 'MediaElement',
   // ... and other configs here ...
});

peaksGenerated = false;
wavesurfer.load(url);
wavesurfer.drawBuffer();


wavesurfer.on('ready', () => {
   // audio is ready to play   
   wavesurfer.playPause();
});


wavesurfer.on('waveform-ready', () => {
  // waveform is generated
  peaksGenerated = true;
});

This code will play the audio on ready event and then it'll draw the peaks on waveform-ready whenever the PCM data (array of peaks) is generated. In this moment, we have a nice wave on player.
But here is a problem. sometimes there is going to be gap between ready and waveform-ready. Audio is playing but PCM data is not generated yet and no waveform is displayed on view.

What I'm trying to do:
I need to display fake peaks on ready and then update them with the generated peaks on waveform-ready. How can I do that?