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/canvas@1.0.97"></script>
and the web app: https://laftek.github.io/BlazorApp1/
Thank you.
There might be two concerns at play here:
v1.0.98
, so I would try updating to this version and you should see more stable resource consumption in your memory footprint.Hope this helps some!