I have an application that needs to generate a couple thousand images. The way that I'm doing that is with a set of preloaded pngs (acting as transparent layers) and an offscreen canvas. I draw the images onto the canvas, convert it to a blob, and then write the image to a div using a custom class called Images.

I want to show a loading bar and clear old images, first, but there is a 3-5 second delay before the dom updates even though the "empty()" and "show()" code is at the beginning of the click request.

Is there something I'm doing wrong with regard to the asynchrony or promises that is causing the dom to not update immediately?

Here's some of the code:

// Generate Images
$("#generate_images").click(function(){
    // Show loading bar
    $("#progress_bar .progress-bar").css("width", "0%");
    $("#progress_bar").show(0);

    // Show loading spinner
    $("#loading").show(0);
    $("#images").empty();

    console.log("Generating Images");

    $.each(images, function(id, image){
        // Sort traits (png layers)
        var traits = Object.values(image.traits).sort((a, b) => {
            return a.z_index - b.z_index;
        });
        images[id].layers = [];
        $.each(traits, function(trait_idx, trait){
            images[id].layers.push(preloaded_images[trait.variant_id])
        });
    });

    // Create canvas
    var canvas = new OffscreenCanvas(1200, 1200);
    var context = canvas.getContext("2d");

    console.log("Generating canvases.");
    $.each(images, function(id, image){
        // Clear the canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

        // Draw each image layer
        $.each(images.layers, function(src, layer){
            context.drawImage(layer, 0, 0);
        });

        // Add imageData to screen
        canvas.convertToBlob().then(function(blob) {
            // Do something with the blob like render to the screen
        });
    });
});

Any thoughts on making this more efficient would also be appreciated.