Not updating js module after route change

[Laftek]

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

[MackinnonBuck]

Thanks for reaching out. Are the parentheses in the following line intentional? They will show up in the generated URL

<lottie-player src="lottie/(@animNumber).json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>

Could you try swapping the ( and @ characters to see if it resolves your issue? If you need more help, we recommend reaching out to StackOverflow since this is not a general-purpose support forum.

[Laftek]

Thanks @MackinnonBuck

I tried but it didnt help. Actually I think this one is bug in blazor because when you change route from "/" to "/2" the animation loads correctly but changing it then from "/2" to "/3" doesnt work and animation even if its changed in the backgroud(3.json) it will still show only 2nd one (2.json). It would be great if someone from ASP can investigate. Thank you.

[MackinnonBuck]

@Laftek Could you clarify if the generated HTML is reflecting the change from 2 to 3? That will help us narrow down where the problem lies. Thanks!

[Laftek]

@MackinnonBuck Yes so when I inspect the animation on lets say localhost/3 it says lottie-player…./3.json but on the screen I see 2.json. The same goes on and on -> localhost/4 -> /4.json in code/html but seeing still 2.json on screen. Thanks.

[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.

[Laftek]

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