Skip to main content

Skeleton

Reserve content structure while data is loading without implying completed content.

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let defaultSkeleton =
    SkeletonRegion.create "Loading content" (Skeleton.create () |> Skeleton.render)
    |> SkeletonRegion.render

On this page

Installation

Copy this component and its required dependencies into the consumer-owned Components project.

dotnet fve add skeleton --config src/Acme.Components/fve.json

The CLI resolves dependencies and preserves consumer-authored files. See Installation for project initialization and Tailwind source detection.

Usage

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let defaultSkeleton =
    SkeletonRegion.create "Loading content" (Skeleton.create () |> Skeleton.render)
    |> SkeletonRegion.render

Text

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let textSkeleton =
    SkeletonRegion.create "Loading description" (
        div {
            _class "grid min-w-0 gap-2"
            Skeleton.create () |> Skeleton.render
            Skeleton.create () |> Skeleton.render
            Skeleton.create () |> Skeleton.withSize "75%" "1rem" |> Skeleton.render
        })
    |> SkeletonRegion.render

Avatar row

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let avatarSkeleton =
    SkeletonRegion.create "Loading profile" (
        div {
            _class "flex min-w-0 items-center gap-4"
            Skeleton.create () |> Skeleton.withShape SkeletonShape.Circle |> Skeleton.render
            div {
                _class "grid min-w-0 flex-1 gap-2"
                Skeleton.create () |> Skeleton.render
                Skeleton.create () |> Skeleton.withSize "75%" "1rem" |> Skeleton.render
            }
        })
    |> SkeletonRegion.render

Card

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let cardSkeleton =
    SkeletonRegion.create "Loading card" (
        div {
            _class "grid min-w-0 gap-4"
            Skeleton.create () |> Skeleton.withShape SkeletonShape.Rectangle |> Skeleton.withSize "100%" "9rem" |> Skeleton.render
            div {
                _class "grid min-w-0 gap-2"
                Skeleton.create () |> Skeleton.withSize "70%" "1rem" |> Skeleton.render
                Skeleton.create () |> Skeleton.withSize "45%" "1rem" |> Skeleton.render
            }
        })
    |> SkeletonRegion.render

API reference

type SkeletonShape =
    | Text
    | Rectangle
    | Circle

type SkeletonConfig

type SkeletonRegionConfig

module SkeletonRegion =
    val create : label:string -> content:HtmlElement -> SkeletonRegionConfig
    val withAttributes : attributes:HtmlAttribute list -> config:SkeletonRegionConfig -> SkeletonRegionConfig
    val render : config:SkeletonRegionConfig -> HtmlElement

/// Use for initial loading, not to replace established content during navigation.
module Skeleton =
    val create : SkeletonConfig
    val withShape : shape:SkeletonShape -> config:SkeletonConfig -> SkeletonConfig
    val withSize : width:string -> height:string -> config:SkeletonConfig -> SkeletonConfig
    val withAttributes : attributes:HtmlAttribute list -> config:SkeletonConfig -> SkeletonConfig
    val render : config:SkeletonConfig -> HtmlElement