Not updating js module after route change

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I am trying to load lottie animations after every click of the button. I chose to not load animation itself but rather use routing. So every click will create a route localhost/1 -> it should load 1.json (lottie animation), localhost/2 -> it should load …json etc.

The problem is that I tried to use every lifecycle and also statehaschanged but nothing helped to change the lottie animation even if parameter is passing correctly. So first change works Index->/number but after same animation is being display despite the fact the number is changing.

Could you please help me out?

Thank you.

@page "/{animNumber:int}"
@inject IJSRuntime JSRuntime
@inject NavigationManager navigationManager

<PageTitle>Index</PageTitle>

<h3>Anim @animNumber</h3>
<lottie-player src="lottie/(@animNumber).json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
<audio id="roar" src="/sound/duo.mp3" @onended="NavigateToNextAnimation" />
<button id="soundButton" @onclick="PlaySound">Click me!</button>

@code {
    [Parameter]
    public int animNumber { get; set; }

    public async Task PlaySound()
    {
        await JSRuntime.InvokeAsync<string>("PlayAudio", "roar");
        animNumber++;
    }
    public void NavigateToNextAnimation()
    {
        navigationManager.NavigateTo($"/{animNumber}");
    }
}

Expected Behavior

To change animation after every button click.

Steps To Reproduce

Minimal version: https://github.com/Laftek/BlazorNotReloadingLottie.git

Exceptions (if any)

No response

.NET Version

7.0.100

Anything else?

No response

[Laftek]

@MackinnonBuck Thank you! it works now! Thanks again!

[MackinnonBuck]

@Laftek If the generated HTML is correct, then this seems to be a bug in the lottie-player custom element, not Blazor. It’s possible that the custom element isn’t reacting to changes to its attribute values. You could try adding a @key attribute to the custom element and setting its value to animNumber to force the custom element to be destroyed and re-created when animNumber changes.