Rive animation is really slow (in Blazor WASM) after re-routing to the page with animation (even with dispose implemented)

Question

So I tried to display rive animation ("/" page) with Blazor WASM (basic template). When I click on Counter ("/counter" page) and back to index page ("/" page) lets say 20x animation is really freezing and maybe after 27x it takes 20s to even render animation. Also my CPU went 12% up and RAM 120MB after those 27x. I was trying to use dev tools but as newbie it was pretty worthless. I can see biggest memory cost is rive library. Also my code has Dispose implemented (see below).

My question is: is it something I am doing wrong or should I file new issue on rive repo or maybe asp.net?

Index.razor:

@page "/"
@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<canvas id="canvas" width="500" height="500"></canvas>

@code {
    IJSObjectReference? rivWrapper;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            rivWrapper = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Pages/Index.razor.js");
            await rivWrapper.InvokeVoidAsync("createRive");
        }
    }

    public async ValueTask DisposeAsync()
    {
        await rivWrapper!.DisposeAsync();
    }
}

Index.razor.js:

export function createRive() {
    const r = new rive.Rive({
        src: 'bear.riv',
        canvas: document.getElementById('canvas'),
        autoplay: true,
    });
}

index.html:

<script src="https://unpkg.com/@rive-app/[email protected]"></script>

and the web app: https://laftek.github.io/BlazorApp1/

Thank you.

Answer 1

There might be two concerns at play here:

1. There was a memory leak patched in a recent release, v1.0.98, so I would try updating to this version and you should see more stable resource consumption in your memory footprint.
2. With the Web JS runtime, you'll need to make sure you're cleaning up the Rive instance created. Under the hood, creating a Rive instance will spawn a number of C++ objects from the WASM side and need to be explicitly cleaned up for example, when you navigate pages. More here: https://help.rive.app/runtimes/overview/web-js#4.-clean-up-rive

Hope this helps some!