# Defer

The Defer component allows you to render content asynchronously. The asynchronous task is triggered only on the first render of the Defer component. This is useful for loading heavy components or data without blocking the initial UI rendering. You can also provide a load message or skeleton to display while the content is loading.

Use the Defer helper method from Tesserae.UI. It accepts an asynchronous function that returns the component to be rendered.

using System.Threading.Tasks;
using Tesserae;
using static Tesserae.UI;

public class DeferExample
{
    public IComponent CreateLazyComponent()
    {
        return Defer(async () =>
        {
            await Task.Delay(2000); // Simulate heavy work
            return TextBlock("Content loaded!");
        },
        loadMessage: TextBlock("Loading..."));
    }
}

• Creates a component that defers the rendering of its content until the provided asynchronous task completes.
• Parameters:
  • asyncGenerator: A function that returns a Task which resolves to the IComponent to be rendered.
  • loadMessage: (Optional) A component to display while the async task is running.
• Returns: An IComponent representing the deferred content.

• Creates a component that updates whenever the provided observable changes (not exactly Defer, but related). Note: This might be better documented under Observables or similar if it exists, but DeferSync appears in TippySample.cs.

This sample demonstrates how to use Defer to load content after a delay.

using System;
using System.Threading.Tasks;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

public class DeferSample : IComponent
{
    public HTMLElement Render()
    {
        return Stack().Children(
            TextBlock("Below content is loaded asynchronously:"),
            Defer(async () =>
            {
                await Task.Delay(1000);
                return TextBlock("This content was deferred.").Success();
            },
            loadMessage: Spinner("Loading content..."))
        ).Render();
    }
}

• Spinner
• ProgressIndicator