Tesserae

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.

saving-toast-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var btn = Button("Save").OnClick((s, e) => new SavingToastExample().PerformSave());
            document.body.style.overflow = "hidden";
            MountCenteredToBody(btn);
        }
    }

    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

saving-toast-2-sample.js

using System;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var btn = Button("Save").OnClick(async (s, e) => await SaveDataAsync());
            document.body.style.overflow = "hidden";
            MountCenteredToBody(btn);
        }

        public static async Task SaveDataAsync()
        {
            var toast = new SavingToast("Saving data...");
            toast.Saving();

            try
            {
                await Task.Delay(500);
                toast.Saved("Data saved!");
            }
            catch (Exception ex)
            {
                toast.Error("Failed to save data: " + ex.Message);
            }
        }
    }
}

Referenced by

save-button