Numeric progress for WASM loading

[stevemonaco]

I was trying to write a progress bar for our WASM app and hit a block with how Blazor does it (--blazor-load-percentage css variable) which was forwarded automatically in a deep part of dotnet which I didn't think we could modify and provide myself.

Thanks to Cédric from the Telegram for the initial solution. Modify wwwroot/main.js like so:

const dotnetRuntime = await dotnet
    .withDiagnosticTracing(false)
    .withApplicationArgumentsFromQuery()
    .withModuleConfig({
        onDownloadResourceProgress: (loaded, total) => {
            console.log(`Progress: ${loaded}/${total} resources downloaded`);

            // Example: update a progress bar
            const progressElement = document.getElementById("progress");
            const progress = document.getElementById("progress-text");
            if (total > 0) {
                progressElement.value = (loaded / total) * 100;
                progress.textContent = (loaded / total) * 100;
            }
        }
    })
    .create();

withModuleConfig and onDownloadResourceProgress being the key parts. This updates on a per-file basis, but real apps have lots of WASM files to download, so it's not a big problem.

For a Blazor-like approach, use:

document.documentElement.style.setProperty('--wasm-load-percentage', `${percentage}%`);`
document.documentElement.style.setProperty('--wasm-load-percentage-text', `"${Math.floor(percentage)}%"`);

I suspect this will be built into Avalonia someday sooner-than-later.