I have something i searched a lot about the solution but i don't find anything. Also i tried a lot of things but also no thing work with me. I hope to find something here.

I build a website, in some stages i allow the user to convert his images from any type to WEBP. So I made I constructor function to do this proccess:

async function loadImage(url) {
    return await new Promise((resolve, reject) => {
        let img = new Image();
        img.addEventListener('load', e => resolve(img));
        img.addEventListener('error', () => {
            reject(new Error(`Failed to load image's URL: ${url}`));
        });

        img.src = url;
    });
}

async function convert(image, options) {
    let newImage = new Image();
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');

    return await new Promise((resolve) => {
        canvas.width = image.width;
        canvas.height = image.height;

        ctx.drawImage(image, 0, 0, image.width, image.height);

        // convert canvas to webp image
        newImage.src = canvas.toDataURL(`image/${options.to}`, 1);
        resolve(newImage)
    });
}

async function Converter(userImage, options) {

    let src = URL.createObjectURL(userImage);

    let image = new Image();

    image.src = src;
    image.style.width = "auto";
    image.style.height = "auto";

    let t;

    await loadImage(src).then(img => {
        return convert(img, options)
    }).then(newImage => {
        t = newImage;
    })

    return t;
}

export default Converter;

I allow him to load the images and converting it with Javascript without upload the images to server.

I am using this function in another js file like this:

        formInputs.addEventListener('change', e => {

                if (formInputs.files.length > 0) {
                    updateFilatorTable(filatorInput.files);
                }
            })

As you see i am using promises and async/wait, for waiting images to load and convert. but the problem also here in await. how can i show the user Progress bar when the image loading and after that showing another progress bar when the image converting, with real percent for example: 25% converting.

Every thing working good but the problem is how to show progress bar when i load the image and when i convert it?

can i make something like that with promise and await?