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