Tesserae - Defer

Defer

Description

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.

Usage

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

defer-sample.js

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 sampleComponent = new DeferExample().CreateLazyComponent();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

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

API reference

class

DeferedComponent

internal sealed class DeferedComponent : IDefer

A placeholder that asynchronously loads its real content from a Task, optionally showing a loading state while waiting.

Methods

Method

DeferedComponent.Refresh

public void Refresh()

Refreshes the component's rendered state.

Method

DeferedComponent.RefreshAsync

public Task RefreshAsync()

Refreshes the async.

Method

DeferedComponent.Debounce

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

The milliseconds must be a value of at least one, trying to disable Debounce by passing a zero (or negative) value is not supported

Method

DeferedComponent.Debounce

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

Configures the component to debounce.

Method

DeferedComponent.DoNotWaitForComponentMountingBeforeRendering

public IDefer DoNotWaitForComponentMountingBeforeRendering()

By default, the component will generate an empty container and only start to initiate the data retrieval and full rendering process when it is mounted in the DOM (so that things like height calculations may be performed accurately, which require that the component exist in its expected location in the DOM) but this can be expensive if rendering many items. If it is known that the component is immediately going to be mounted then this method may be called and the DomObserver.WhenMounted logic will be bypassed and replaced with a simple setTimeout of very short duration (to allow the immediate rendering of the element to take place).

Method

DeferedComponent.Render

public HTMLElement Render()

Renders the component's root HTML element.

Samples

Basic Defer Usage

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

defer-2-sample.js

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 sampleComponent = new DeferSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

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

Referenced by

Observables

Defer

Description

Usage

API reference

Methods

DeferedComponent.Refresh

DeferedComponent.RefreshAsync

DeferedComponent.Debounce

DeferedComponent.Debounce

DeferedComponent.DoNotWaitForComponentMountingBeforeRendering

DeferedComponent.Render

Samples

Basic Defer Usage

See also

Referenced by