(BUG) MudLoading & MudLoadingButton do not work in a MudMenu

[derekwelton]

trafficstars

The loading animation does not work if you place the MudLoading or MudLoadingButton in a MudMenu. If I take the MudCard out of the Menu with the "Loading" Components, it does work.

@page "/"

<MudMenu>
    <ActivatorContent>
        <MudButton Variant="Variant.Filled" Color="Color.Primary">Log In</MudButton>
    </ActivatorContent>
    <ChildContent>
        <MudCard>
            <MudForm>
                <MudCardContent>
                    <MudLoading @bind-Loading="_signingIn" Text="Text Here" />
                </MudCardContent>
                <MudCardActions>
                    <MudLoadingButton @bind-Loading="_signingIn" OnClick="Login"
                                      Size="Size.Small" LoadingAdornment="Adornment.Start" Variant="Variant.Filled" Color="Color.Primary">Sign In</MudLoadingButton>
                </MudCardActions>
            </MudForm>
        </MudCard>
    </ChildContent>
</MudMenu>


@code
{
    private bool _signingIn = false;


    public async Task Login()
    {
        _signingIn = true;

        await Task.Delay(5000);

        _signingIn = false;
    }
}

[mckaragoz]

Strange.

If you set private bool _signingIn = true; loading and loading button succesfully shows the loading indicator. Its probably a rendering issue but i don't find the exact problem yet.

[derekwelton]

Good find. It does work if it starts first. I created a different case where I have 2 loading buttons that do the opposite from each other. What's interesting is if it _signingIn = true at the beggining, it works like it should when you press the sign in button:

<MudMenu>
    <ActivatorContent>
        <MudButton Variant="Variant.Filled" Color="Color.Primary">Log In</MudButton>
    </ActivatorContent>
    <ChildContent>
        <MudPaper MinWidth="100%" MinHeight="100%" Class="pa-4">
            <MudForm>
                <MudGrid>
                    <MudItem xs="12">
                        <MudLoadingButton OnClick="Login" @bind-Loading="@_signingIn"
                                          Size="Size.Small" LoadingAdornment="Adornment.Start" Variant="Variant.Filled" Color="Color.Primary">loading button</MudLoadingButton>
                    </MudItem>
                    <MudItem xs="12">
                        <MudLoadingButton OnClick="Login" @bind-Loading="@_signingIn2"
                                          Size="Size.Small" LoadingAdornment="Adornment.Start" Variant="Variant.Filled" Color="Color.Primary">Sign In</MudLoadingButton>
                    </MudItem>
                </MudGrid>
            </MudForm>
        </MudPaper>
    </ChildContent>
</MudMenu>

@code
{
    private bool _signingIn = true;
    private bool _signingIn2 = false;


    public async Task Login()
    {
        _signingIn = false;
        _signingIn2 = true;

        await Task.Delay(2000);

        _signingIn = true;
        _signingIn2 = false;
    }
}

[devv-guru]

Been having a similar issue, where I want my mudloading to only show once a button is clicked that then show some progress text and a loader icon.