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 variant that reports progress (0-100%) while its real content is being prepared.

Methods

Method

DeferedComponentWithProgress.Refresh

public void Refresh()

Refreshes the component's rendered state.

Method

DeferedComponentWithProgress.RefreshAsync

public Task RefreshAsync()

Refreshes the async.

Method

DeferedComponentWithProgress.Debounce

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

Configures the component to debounce.

Method

DeferedComponentWithProgress.Debounce

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

Configures the component to debounce.

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

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

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

DeferedComponentWithProgress.Debounce

DeferedComponentWithProgress.DoNotWaitForComponentMountingBeforeRendering

DeferedComponentWithProgress.Render

Samples

Basic Usage

Usage with Observables

See also