Tesserae - 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.

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);
        }
    }
}

API reference

class

SavingToast

public class SavingToast

A toast variant that shows a "saving…" indicator while a long operation is running, swapping to success / error feedback when it completes.

Constructors

Constructor

SavingToast

public SavingToast(string initialMessage)

Initializes a new instance of this class.

Properties

Property

SavingToast.MinimumDisplayTime

public TimeSpan MinimumDisplayTime { get; set; }

Gets or sets the minimum display time.

Methods

Method

SavingToast.Saving

public SavingToast Saving(string message = null, string title = "Saving...")

Configures the component to saving.

Method

SavingToast.Saved

public SavingToast Saved(string message = null, string title = "Saved")

Configures the component to saved.

Method

SavingToast.Error

public SavingToast Error(string message = null, string title = "Error", bool untilDismissed = false)

Gets or sets the validation error message displayed beneath the component.

class

SavingToastHelper

public static class SavingToastHelper

Extension helpers for awaiting a while showing a .

Methods

Method

SavingToastHelper.WithSavingToast<T>

public static async Task<T> WithSavingToast<T>(this Task<T> task, string savingMessage = "Saving...", string savedMessage = "Saved", string errorMessage = "Error")

Awaits the given task while displaying a : the toast shows a "saving" indicator while the task is in flight and swaps to a "saved" or "error" message on completion.

Method

SavingToastHelper.WithSavingToast

public static async Task WithSavingToast(this Task task, string savingMessage = "Saving...", string savedMessage = "Saved", string errorMessage = "Error")

Returns the component configured with the given saving toast.

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

SavingToast

Description

Usage

API reference

Constructors

SavingToast

Properties

SavingToast.MinimumDisplayTime

Methods

SavingToast.Saving

SavingToast.Saved

SavingToast.Error

Methods

SavingToastHelper.WithSavingToast<T>

SavingToastHelper.WithSavingToast

Samples

Handling a Save Operation

See also

Referenced by