Close a modal after a few seconds in Blazor - modal-dialog

Question

So basically I am want to show a modal when the user hits a button to show them if the action was successfull or if there were problems. but then after a few seconds I want to close it so the user doesn't have to manualy close it each time. Is there a way to do this without pausing the whole program for a few seconds? or is there a better way to show a user a message instead of a modal?
right now i got these 2 methods for opening and closing the modal:
public void Open(string title, string message)
{
ModalDisplay = "block;";
ModalClass = "Show";
ShowBackdrop = true;
ModalTitle = title;
ModalBody = message;
StateHasChanged();
}
public void Close()
{
ModalDisplay = "none";
ModalClass = "";
ShowBackdrop = false;
StateHasChanged();
}

Answer 1

If your event/method can be async, you can skip the timer and just use Task.Delay(milliseconds), something like
public async Task Open(string title, string message)
{
ModalDisplay = "block;";
ModalClass = "Show";
ShowBackdrop = true;
ModalTitle = title;
ModalBody = message;
StateHasChanged();
await Task.Delay(2000);
ModalDisplay = "none";
ModalClass = "";
ShowBackdrop = false;
StateHasChanged();
}

Answer 2

So i have solved my issue and added a timer so now after i show the dialog i start a timer for 2 seconds and when that expires it executess a method that hides the modal:
private void ToggleModal(string title, string message)
{
//Showing modal
ModalDisplay = "block;";
ModalClass = "Show";
ShowBackdrop = true;
ModalTitle = title;
ModalBody = message;
StateHasChanged();
//Hiding modal
Timer timer = new Timer();
timer.Interval = 2000;
timer.Elapsed += OnTimedEvent;
timer.AutoReset = false;
timer.Enabled = true;
}
private void OnTimedEvent(Object source, System.Timers.ElapsedEventArgs e)
{
InvokeAsync(() => {
ModalDisplay = "none";
ModalClass = "";
ShowBackdrop = false;
StateHasChanged();
});
}
there might be a better way to achieve this but this is what works for me for now!

Answer 3

Instead of a modal, I have just a div rendered on the page. This is the razor component:
#if (!string.IsNullOrWhiteSpace(Text))
{
<div class="alert #alertClass">#Text</div>
}
#code {
private string messageType;
private string alertClass = "alert-info";
[Parameter] public string Text { get; set; }
protected override async Task OnParametersSetAsync()
{
await Task.Delay(2000);
Text = "";
}
[Parameter]
public string MessageType
{
get { return messageType; }
set
{
messageType = value;
switch (messageType)
{
case "Error":
alertClass = "alert-danger";
break;
case "Warning":
alertClass = "alert-warming";
break;
case "Success":
alertClass = "alert-success";
break;
default:
break;
}
}
}
}
Usage:
<AlertMessage Text="Lorem ipsum dolor sit amet." MessageType="Error"/>