Getting stuck on generation while in a loop

Current Behavior

I'm using html-to-image to generate images of the data tables in the loop (Let's say I've got 300 tables I need to make a screenshot of). The issue is sometimes it gets stuck without getting into then() or catch(). I couldn't find any pattern when it's happening. When it gets stuck once, I wiped the data, and in another run, it got stuck at other table. Sometimes It happens that whole 300 will run without a stuck, but sometimes it got frozen even at the beginning.

Steps To Reproduce

This is the code. When it gets stuck, the last thing in the console is 'generate stats'.

async generateImage() {
    await new Promise(async resolve => {
        var node: any = document.getElementById('image-section');
        console.log('generate stats');

        await htmlToImage.toBlob(node).then((dataUrl) => {
            console.log('stats generated');
            // ...
        }).catch(() => {
            console.log('stats not generated');
        });
    }
}

Additional info

It happens no matter the image size (I was console.loging size of the area before running generation). If the image would be too big (or got too many elements), then it's going to the catch(). But why does it get stuck? Seems completely random.

Your Environment

npm: 8.15.0
angular/cdk: 14.2.3
html-to-image: 1.11.11 (but I've had this issue on 1.10.8 too)
OS: Windows 10,
Browser: Brave 1.48.158, chromium: 110.0.5481.77 64-bit

bubkoo / html-to-image