Skeleton

The loading placeholder: rounded blocks and circles pulsing on the shared clock.

Give it the shape of the content it stands in for. Zero width fills the available width; SkeletonCircle is the round form. Self-invalidating — mount only while loading.

Installation

Use the module import (the default), or own the source: lotusui add vendors the component into your app and lotusui update keeps the copy mergeable — see Registry.

go get github.com/ikaito-com/lotusui

# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add skeleton

Usage

open demo ↗

layout.Flex{Alignment: layout.Middle}.Layout(gtx,
	layout.Rigid(lotusui.SkeletonCircle(th, 48)),
	layout.Rigid(lotusui.HSpacer(th.Space.MD)),
	layout.Rigid(lotusui.VStack(th.Space.SM,
		lotusui.Skeleton(th, 250, 16),
		lotusui.Skeleton(th, 200, 16),
	)),
)

Avatar

open demo ↗

lotusui.SkeletonCircle(th, 40) // beside two text lines

Card

Two header lines and a 16:9 media block inside a Card.

open demo ↗

lotusui.Card(th, lotusui.CardProps{}, lotusui.VStack(th.Space.SM,
	lotusui.Skeleton(th, 180, 16),
	lotusui.Skeleton(th, 140, 16),
	mediaBlockSkeleton, // Skeleton(th, 0, h) at 16:9
))

Form

open demo ↗

lotusui.VStack(th.Space.LG,
	lotusui.VStack(th.Space.SM, lotusui.Skeleton(th, 80, 16), lotusui.Skeleton(th, 0, 32)),
	lotusui.VStack(th.Space.SM, lotusui.Skeleton(th, 96, 16), lotusui.Skeleton(th, 0, 32)),
	lotusui.Skeleton(th, 96, 32),
)

Table

open demo ↗

// five rows of [flexible, 96dp, 80dp] lines

Text

open demo ↗

lotusui.VStack(th.Space.SM,
	lotusui.Skeleton(th, 0, 16),
	lotusui.Skeleton(th, 0, 16),
	threeQuarterLine,
)

API

Option	Type	Description
`Skeleton(th, w, h)`	`unit.Dp`	A pulsing rounded block; w = 0 fills the available width.
`SkeletonCircle(th, d)`	`unit.Dp`	The round form — avatars, icon slots.