Class TwSkeleton

Namespace

TwBlazor.Components

Assembly

TwBlazor.dll

Renders a loading placeholder. With no ChildContent it renders a single static shape (SkeletonType/Width/Height). With ChildContent supplied, it instead measures the real rendered layout of that content (via the twSkeleton.observe JS interop call) and generates matching placeholder blocks automatically, so wrapping any markup in <TwSkeleton Loading="..."> produces a skeleton shaped like the content it hides.

public class TwSkeleton : TwBlazorComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent, IAsyncDisposable

Inheritance

object

ComponentBase

TwBlazorComponentBase

TwSkeleton

Implements

IComponent

IHandleEvent

IHandleAfterRender

ITwComponent

IAsyncDisposable

Inherited Members

TwBlazorComponentBase.OnParametersSet()

TwBlazorComponentBase.options

TwBlazorComponentBase.roundedBuilder

TwBlazorComponentBase.shadowBuilder

TwBlazorComponentBase.colorBuilder

TwBlazorComponentBase.iconColorBuilder

TwBlazorComponentBase.popoverBuilder

TwBlazorComponentBase.Id

TwBlazorComponentBase.Class

TwBlazorComponentBase.Style

TwBlazorComponentBase.Attributes

TwBlazorComponentBase.AriaLabel

TwBlazorComponentBase.AriaLabelledBy

TwBlazorComponentBase.Shadow

TwBlazorComponentBase.Rounded

TwBlazorComponentBase.effectiveShadow

TwBlazorComponentBase.effectiveRounded

TwBlazorComponentBase.hasUserProvidedId

ComponentBase.OnInitialized()

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.RendererInfo

ComponentBase.Assets

ComponentBase.AssignedRenderMode

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Constructors

TwSkeleton()

public TwSkeleton()

Properties

Animation

Gets or sets the loading animation played by every placeholder block this component renders. Default is Pulse.

[Parameter]
public SkeletonAnimation Animation { get; set; }

Property Value

SkeletonAnimation

ChildContent

Gets or sets the real content to show once Loading is false. When supplied, this component ignores SkeletonType/Width/Height and instead generates placeholder blocks that mirror this content's own measured layout.

[Parameter]
public RenderFragment? ChildContent { get; set; }

Property Value

RenderFragment

Height

Gets or sets a CSS height for the standalone placeholder shape. See Width.

[Parameter]
public string? Height { get; set; }

Property Value

string

Loading

Gets or sets whether the placeholder (or, with ChildContent supplied, a generated skeleton shaped like it) is shown instead of the real content. Default is true.

[Parameter]
public bool Loading { get; set; }

Property Value

bool

SkeletonType

Gets or sets the placeholder shape used when no ChildContent is supplied. Default is Text.

[Parameter]
public SkeletonType SkeletonType { get; set; }

Property Value

SkeletonType

Width

Gets or sets a CSS width (e.g. "50px", "100%") for the standalone placeholder shape shown when no ChildContent is supplied. Ignored once ChildContent is set, since generated placeholders are sized from the content's own measured layout instead.

[Parameter]
public string? Width { get; set; }

Property Value

string

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

DisposeAsync()

Stops observing the measured content's layout and releases the JS interop reference.

public ValueTask DisposeAsync()

Returns

ValueTask

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered interactively and the UI has finished updating (for example, after elements have been added to the browser DOM). Any ElementReference fields will be populated by the time this runs.

This method is not invoked during prerendering or server-side rendering, because those processes are not attached to any live browser DOM and are already complete before the DOM is updated.

Note that the component does not automatically re-render after the completion of any returned Task, because that would cause an infinite render loop.

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Set to true if this is the first time OnAfterRender(bool) has been invoked on this component instance; otherwise false.

Returns

Task

A Task representing any asynchronous operation.

Remarks

The OnAfterRender(bool) and OnAfterRenderAsync(bool) lifecycle methods are useful for performing interop, or interacting with values received from @ref. Use the firstRender parameter to ensure that initialization work is only performed once.

OnRectsMeasured(List<SkeletonRect>)

Invoked from JS (twSkeleton.observe's ResizeObserver callback) whenever the measured ChildContent layout is (re)computed - once for the initial measurement, and again after every subsequent resize while this component keeps observing it.

[JSInvokable]
public void OnRectsMeasured(List<SkeletonRect> rects)

Parameters

rects List<SkeletonRect>