Tesserae

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.js

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 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.js

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 component = VStack().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);
        }
    }
}

Skeleton

Description

Samples

Avatar and Text Placeholder

Article/Image Placeholder

See also