I have a download button which user clicks to download a media file from Azure blob storage. I was expecting it to get download straightaway and user can see the download progress but instead, it is not downloading until the request gets completed.

[![enter image description here](https://i.stack.imgur.com/8Heqp.png)](https://i.stack.imgur.com/8Heqp.png)

As you can see in the above figure It's taking almost 30 seconds to download the stream and then the user is seeing the downloaded file. Could you please someone guide me in achieving the behavior shown in the below image

[![enter image description here](https://i.stack.imgur.com/Hs6UU.png)](https://i.stack.imgur.com/Hs6UU.png)

I am using file-saver.js for saving file in Angular

```
this.downloadMediaService.downloadAsset(assetId).then((httpResponse) => {
        const {body: blob} = httpResponse;
        this.mediaBlob = blob;
        Filesaver.saveAs(blob, this.assetName);
      });
    }

```