Tesserae - Defer With Progress

DeferWithProgress

Description

A utility to defer execution with progress

DeferWithProgress extends Defer by providing a way to report progress during the async operation. This is useful for long-running tasks where you want to show a progress bar or status updates.

API reference

class

DeferedComponentWithProgress

internal sealed class DeferedComponentWithProgress : IDefer

A DeferedComponent variant that reports progress (0-100%) while its real content is being prepared.

Namespace: Tesserae
Implements: IDefer

Methods

Name	Description
Refresh	Refreshes the component's rendered state.
RefreshAsync	Refreshes the async.
Debounce	Configures the component to debounce.
DoNotWaitForComponentMountingBeforeRendering	Configures the do not wait for component mounting before rendering on the component.
Render	Renders the component's root HTML element.

Method

DeferedComponentWithProgress.Refresh

public void Refresh()

Refreshes the component's rendered state.

Method

DeferedComponentWithProgress.RefreshAsync

public Task RefreshAsync()

Refreshes the async.

Method

DeferedComponentWithProgress.Debounce

Overload
Debounce(int, int)	Configures the component to debounce.
Debounce(int, int, int)	Configures the component to debounce.

Debounce(int, int)

public IDefer Debounce(int delayInMs, int millisecondsForLoadingMessage = 1000)

Configures the component to debounce.

Parameters

delayInMs int
millisecondsForLoadingMessage int

Debounce(int, int, int)

public IDefer Debounce(int delayInMs, int maxDelayInMs, int millisecondsForLoadingMessage = 1000)

Configures the component to debounce.

Parameters

delayInMs int
maxDelayInMs int
millisecondsForLoadingMessage int

Method

DeferedComponentWithProgress.DoNotWaitForComponentMountingBeforeRendering

public IDefer DoNotWaitForComponentMountingBeforeRendering()

Configures the do not wait for component mounting before rendering on the component.

Method

DeferedComponentWithProgress.Render

public HTMLElement Render()

Renders the component's root HTML element.

Samples

Basic Usage

defer-with-progress-basic-sample.cs

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 container = VStack();

            var component = VStack().Children(
                TextBlock("Click the button below to start a simulated long-running task with progress reporting."),
                Button("Start Task").Primary().OnClick(() =>
                {
                    container.Clear();
                    container.Add(
                        DeferWithProgress(async (reportProgress) =>
                        {
                            for (int i = 0; i <= 100; i += 10)
                            {
                                reportProgress(i / 100f, $"Processing step {i / 10} of 10...");
                                await Task.Delay(500);
                            }
                            return TextBlock("Task Completed Successfully!").Success().SemiBold().P(10);
                        })
                    );
                }),
                container
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Usage with Observables

defer-with-progress-observables-sample.cs

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 trigger = new SettableObservable<int>(0);

            var component = VStack().Children(
                TextBlock("DeferWithProgress can also observe values and refresh when they change, passing the observed values to the async generator."),
                Button("Trigger Refresh").Primary().OnClick(() => trigger.Value++),
                DeferWithProgress(trigger, async (val, progress) =>
                {
                    progress(0, "Starting...");
                    await Task.Delay(500);
                    progress(0.3f, "Step 1 complete");
                    await Task.Delay(500);
                    progress(0.6f, "Step 2 complete");
                    await Task.Delay(500);
                    progress(0.9f, "Finalizing...");
                    await Task.Delay(500);
                    return TextBlock($"Loaded content for trigger value: {val}").Success();
                })
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

DeferWithProgress

Description

API reference

Methods

DeferedComponentWithProgress.Refresh

DeferedComponentWithProgress.RefreshAsync

DeferedComponentWithProgress.Debounce

Debounce(int, int)

Parameters

Debounce(int, int, int)

Parameters

DeferedComponentWithProgress.DoNotWaitForComponentMountingBeforeRendering

DeferedComponentWithProgress.Render

Samples

Basic Usage

Usage with Observables

See also