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

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.

Namespace: Tesserae

Constructors

Name	Description
SavingToast	Initializes a new instance of this class.

Constructor

SavingToast

public SavingToast(string initialMessage)

Initializes a new instance of this class.

Properties

Name	Description
MinimumDisplayTime	Gets or sets the minimum display time.

Property

SavingToast.MinimumDisplayTime

public TimeSpan MinimumDisplayTime { get; set; }

Gets or sets the minimum display time.

Methods

Name	Description
Saving	Configures the component to saving.
Saved	Configures the component to saved.
Error	Gets or sets the validation error message displayed beneath the component.

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 Task while showing a SavingToast.

Namespace: Tesserae

Methods

Name	Description
WithSavingToast	Awaits the given task while displaying a `SavingToast`: 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

Overload
WithSavingToast<T>(Task<T>, string, string, string)	Awaits the given task while displaying a `SavingToast`: the toast shows a "saving" indicator while the task is in flight and swaps to a "saved" or "error" message on completion.
WithSavingToast(Task, string, string, string)	Returns the component configured with the given saving toast.

WithSavingToast<T>(Task<T>, string, string, string)

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 SavingToast: the toast shows a "saving" indicator while the task is in flight and swaps to a "saved" or "error" message on completion.

Parameters

task Task<T>
savingMessage string
savedMessage string
errorMessage string

WithSavingToast(Task, string, string, string)

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.

Parameters

task Task
savingMessage string
savedMessage string
errorMessage string

Samples

Handling a Save Operation

saving-toast-2-sample.cs

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

SavingToast

Description

Usage

API reference

Constructors

SavingToast

Properties

SavingToast.MinimumDisplayTime

Methods

SavingToast.Saving

SavingToast.Saved

SavingToast.Error

Methods

SavingToastHelper.WithSavingToast

WithSavingToast<T>(Task<T>, string, string, string)

Parameters

WithSavingToast(Task, string, string, string)

Parameters

Samples

Handling a Save Operation

See also