How to Display Blazor Toast Messages in a Queue?

This article explores a method to display a single Blazor Toast message while queuing additional messages for later display.

Managing Toast Notifications with a Queue System

The following solution leverages a queue to handle multiple messages, ensuring that only one message is displayed at a time. When a new message is generated, it is added to the queue. When the currently displayed Toast closes, the next message in the queue is automatically shown.

<SfToast @ref="ToastObj" Title="Alert" Content="@ToastContent">
    <ToastEvents Closed="@ClosedHandler"></ToastEvents>
</SfToast>
<div class="col-lg-12 col-sm-12 col-md-12 center">
    <div style="margin: auto; text-align: center">
        <SfButton @onclick="@ShowToast">Show Toast</SfButton>
    </div>
</div>

@code {
    SfToast ToastObj;
    private Queue<string> ToastQueue = new Queue<string>();
    private bool IsToastVisible = false;
    private string[] Contents = new string[] {
        "Welcome User",
        "Upload in progress",
        "Upload success",
        "Profile updated",
        "Profile picture changed",
        "Password changed"
    };
    private int ToastFlag = 0;
    private string ToastContent = "";

    private async Task ShowToast()
    {
        ToastQueue.Enqueue(Contents[ToastFlag]);
        if (!IsToastVisible)
        {
            await ShowNextToast();
        }
        ToastFlag = (ToastFlag + 1) % Contents.Length;
    }

    private async Task ShowNextToast()
    {
        if (ToastQueue.Count > 0)
        {
            ToastContent = ToastQueue.Dequeue();
            IsToastVisible = true;
            await Task.Delay(100);
            await ToastObj.ShowAsync();
        }
    }

    public async void ClosedHandler(ToastCloseArgs args)
    {
        IsToastVisible = false;
        await ShowNextToast();
    }
}

This code snippet explains how a Queue is used to manage messages, with new messages added as they are generated. The IsToastVisible flag controls the display of toasts, ensuring only one is shown at a time. An array of predefined messages is utilized, cycling through them each time a new Toast is requested.

When the ‘Show Toast’ button is clicked:

• A message is added to the queue.
• If no Toast is displayed, the next message is shown.
• Once a Toast closes, the next queued message is automatically displayed.

Additional References

• Syncfusion Blazor Toast Documentation: https://blazor.syncfusion.com/documentation/toast/getting-started

Conclusion
I hope you enjoyed learning how to display Blazor Toast messages in a queue.

You can refer to our Blazor Toast feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Toast example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!