After attempting to display river animation on the index page using Blazor WASM (basic template), I encountered some performance issues. When navigating back and forth between the Counter page and the index page, I noticed that after around 20 clicks, the animation started freezing. It took about 20 seconds to render the animation after approximately 27 clicks, causing a spike in CPU usage by 12% and an increase in RAM by 120MB. Even with my efforts to use dev tools to troubleshoot, the memory consumption of the rive library seemed to be the main culprit. My code includes Dispose implementation as shown below.
I am wondering if there is something wrong with my approach or if I should raise an issue on the rive repository or maybe even with 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcdfddd2caddcffc8d928c92858b">[email protected]</a>"></script>
Web app available at:
Thank you for your assistance.