Trouble displaying Snackbar message after successful password update in Blazor with MudBlazor

I'm facing an issue with displaying a Snackbar message after a successful or unsuccessful password update in a Blazor application using MudBlazor for UI components. Despite successfully updating the password, the Snackbar message is not being displayed. Am using .Net8

@page "/manage-profile"
@using Application.Data   
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Identity
@using Application.Services
@using BCrypt.Net
@using Microsoft.AspNetCore.Antiforgery;
@attribute [RequireAntiforgeryToken]
@rendermode InteractiveServer
@inject ILogger<ManageProfile> Logger
@attribute [Authorize(Roles = "Student")]
@inject NavigationManager NavigationManager
@inject UserService UserService
@inject ISnackbar SnackBar


<PageTitle>Change password</PageTitle>

<br />
<MudContainer>
    <h3>Change password</h3>

 <MudButton Color="Color.Success" @onclick="@(() => SnackBar.Add("The reactor is running at optimum temperature", Severity.Success))">Success Snackbar</MudButton>
    <div class="row">
        <div class="col-md-6">
            <EditForm Model="Input" FormName="change-password" OnValidSubmit="OnValidSubmitAsync" method="post">
                <DataAnnotationsValidator />
                <div class="form-floating mb-3">
                    <InputText type="password" @bind-Value="Input.OldPassword" class="form-control" autocomplete="current-password" aria-required="true" placeholder="Please enter your old password." />
                    <label for="old-password" class="form-label">Old password</label>
                    <ValidationMessage For="() => Input.OldPassword" class="text-danger" />
                </div>
                <div class="form-floating mb-3">
                    <InputText type="password" @bind-Value="Input.NewPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="Please enter your new password." />
                    <label for="new-password" class="form-label">New password</label>
                    <ValidationMessage For="() => Input.NewPassword" class="text-danger" />
                </div>
                <div class="form-floating mb-3">
                    <InputText type="password" @bind-Value="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="Please confirm your new password." />
                    <label for="confirm-password" class="form-label">Confirm password</label>
                    <ValidationMessage For="() => Input.ConfirmPassword" class="text-danger" />
                </div>
                <div class="mb-3">
                    <span class="text-danger">@message</span>
                </div>
                <button type="submit" class="w-100 btn btn-lg btn-primary">Update password</button>
            </EditForm>
        </div>
    </div>
</MudContainer>


@code {
    private string? message;
    private string? successMessage;
    private User user = default!;
    public required string hashedPassword;
    public required long UserId;

    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;

    [SupplyParameterFromForm]
    private InputModel Input { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        UserId = await UserService.GetLoggedInUserId();
        user = await UserService.GetUserById(UserId);

    }

    private async Task OnValidSubmitAsync()
    {
        if (Input.NewPassword == Input.ConfirmPassword)
        {
            if (BCrypt.Verify(Input.OldPassword, user.Password))
            {
                hashedPassword = BCrypt.HashPassword(Input.NewPassword);
                await UserService.ChangeUserPassword(hashedPassword, user);

                await InvokeAsync(() =>
                    {
                        SnackBar.Add("Password Updated successfully", Severity.Success);
                    });
                NavigationManager.NavigateTo(NavigationManager.Uri, true);

                return;
            }
            else
            {
                message = "Old Password is Incorrect";
                return;
            }
        }
        else
        {
            message = "The new password and confirmation password do not match";
            return;
        }

    }

    private sealed class InputModel
    {
        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "Current password")]
        public string OldPassword { get; set; } = "";

        [Required]
        [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "New password")]
        public string NewPassword { get; set; } = "";

        [DataType(DataType.Password)]
        [Display(Name = "Confirm new password")]
        [Compare("NewPassword", ErrorMessage = "The new password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; } = "";
    }
}

What am expecting is after Successfully updating the password the SnackBar message should be popping up showing the successful completion of changing the password. But it not. Overrall the updating of the password is working, but the Snackbar message is not pooping up. But when i use it on a button as shown in the code SnackBar is displayed just okay when the button is clicked.

I'm seeking guidance on how to resolve this issue. Any insights or suggestions would be greatly appreciated. Thank you!

After adding the Snackbar message, youre immediately redirecting the page using NavigationManager.NavigateTo(NavigationManager.Uri, true);. This might be preventing you to see the notification. To understand it, you can comment the redirection line. If thats the reason, you can add await Task.Delay(10000); before the redirection line. This way, it will wait for 10 seconds before redirecting.

I had experienced a similar issue before and i fixed that way. Thats here : click here