#
Saving Toast
#
SavingToast
#
Description
The SavingToast component is a specialized utility that wraps the standard Toast component to provide standardized feedback for background operations. It simplifies displaying "Saving...", "Saved", and "Error" states with appropriate icons and colors, ensuring consistent user experience across the application for asynchronous tasks.
#
Usage
Instantiate the SavingToast with an initial message. Call the Saving(), Saved(), or Error() methods to update the toast's state. The component handles the duration and styling for each state automatically.
using System;
using System.Threading.Tasks;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;
public class SavingToastExample
{
public void PerformSave()
{
// Create the toast with an initial message
var toast = new SavingToast("Saving user settings...");
// Show the saving state (indefinite duration until updated)
toast.Saving();
// Simulate an async operation
window.setTimeout(async (_) =>
{
// Update to success state
toast.Saved("Settings saved successfully!");
}, 2000);
}
}
#
Methods
Saving(string message = null) Displays the toast in the "Saving" state with a refresh icon and primary color. • message: Optional message to display. If null, uses the initial message provided in the constructor. The toast duration is set to indefinite (1 day) while in this state.
Saved(string message = null) Updates the toast to the "Saved" state with a check icon and success color. • message: The success message to display. The toast will be dismissed after
MinimumDisplayTime.Error(string message = null) Updates the toast to the "Error" state with a cross icon and danger color. • message: The error message to display. The toast will be dismissed after
MinimumDisplayTime.Render() Renders the underlying toast component. Note that
SavingToastis typically not rendered into the DOM manually but manages its own visibility via theToastmechanism.
#
Properties
- MinimumDisplayTime
Type:
TimeSpanGets or sets the minimum duration the toast is displayed when in theSavedorErrorstate. Default: 5 seconds.
#
Samples
#
Handling a Save Operation
public async Task SaveDataAsync()
{
var toast = new SavingToast("Saving data...");
toast.Saving();
try
{
await _api.SaveAsync();
toast.Saved("Data saved!");
}
catch (Exception ex)
{
toast.Error("Failed to save data: " + ex.Message);
}
}