Tesserae - Skeleton

Skeleton

Description

A placeholder component for loading state

Skeleton loaders are used to provide a placeholder for content that is still loading. They help reduce the perceived load time and prevent layout shifts by reserving the space that the final content will occupy.

They come in various shapes like circles for avatars and rectangles for text or images.

Samples

Avatar and Text Placeholder

skeleton-avatar-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().Children(
                Skeleton(SkeletonType.Circle).W(48).H(48),
                VStack().Children(
                    Skeleton().W(200).H(16).ML(16).MB(8),
                    Skeleton().W(140).H(12).ML(16)));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Article/Image Placeholder

skeleton-article-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = VStack().W(360).Children(
                Skeleton(SkeletonType.Rect).WS().H(200),
                Skeleton().WS().H(16).MT(16),
                Skeleton().W(80.percent()).H(16).MT(8),
                Skeleton().W(60.percent()).H(16).MT(8)
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

API reference

enum

SkeletonType

public enum SkeletonType

Predefined shape presets used by the Skeleton placeholder.

Namespace: Tesserae

class

Skeleton

public sealed class Skeleton : ComponentBase<Skeleton, HTMLElement>

Namespace: Tesserae
Inheritance: ComponentBase<Skeleton, HTMLElement> → Skeleton

Constructors

Name	Description
Skeleton	Initializes a new instance of this class.

Constructor

Skeleton

public Skeleton(SkeletonType type = SkeletonType.Line)

Initializes a new instance of this class.

Properties

Name	Description
TypeValue	Gets or sets the type value.
IsAnimated	Returns a value indicating whether the component is animated.

Property

Skeleton.TypeValue

public SkeletonType TypeValue { get ; set ; }

Gets or sets the type value.

Property

Skeleton.IsAnimated

public bool IsAnimated { get ; set ; }

Returns a value indicating whether the component is animated.

Methods

Name	Description
Type	Configures the component to type.
Animated	Configures the component to animated.
AI	Tints the placeholder with the AI gradient, and recolours the shimmer to match: this is content being generated rather than content being fetched. Same shape, same animation, same speed - only the colour says what is being waited for.
Background	Gets or sets the CSS background of the component.
Render	Renders the component's root HTML element.

Method

Skeleton.Type

public Skeleton Type(SkeletonType type)

Configures the component to type.

Method

Skeleton.Animated

public Skeleton Animated(bool value = true)

Configures the component to animated.

Method

Skeleton.AI

public Skeleton AI(bool value = true)

Tints the placeholder with the AI gradient, and recolours the shimmer to match: this is content being generated rather than content being fetched. Same shape, same animation, same speed - only the colour says what is being waited for.

Method

Skeleton.Background

public Skeleton Background(string color)

Gets or sets the CSS background of the component.

Method

Skeleton.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Skeleton

Description

Samples

Avatar and Text Placeholder

Article/Image Placeholder

API reference

Constructors

Skeleton

Properties

Skeleton.TypeValue

Skeleton.IsAnimated

Methods

Skeleton.Type

Skeleton.Animated

Skeleton.AI

Skeleton.Background

Skeleton.Render

See also