# 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 SavingToast is typically not rendered into the DOM manually but manages its own visibility via the Toast mechanism.

# Properties

  • MinimumDisplayTime Type: TimeSpan Gets or sets the minimum duration the toast is displayed when in the Saved or Error state. 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);
    }
}

# See also