Skip to content
Gx
GitHub

Skeleton

A placeholder while content loads.

Open the preview in a new tab 

<skeleton.Skeleton class="h-4 w-40" />

Installation

Run the command in the app module.

Terminal
gx add skeleton

The command writes these files.

File Path in the app
Skeleton.gx ui/skeleton/Skeleton.gx
Skeleton.fixtures.go ui/skeleton/Skeleton.fixtures.go

Copy each file to its path in the app. Change each import of a registry package to the path of that package in the app.

ui/skeleton/Skeleton.gx
package skeleton

props {
  // Class adds classes to the root element.
  Class string = ""
  // Attrs adds HTML attributes to the root element.
  Attrs gx.Attrs = nil
}

<div data-slot="skeleton" class={gx.Cx("animate-pulse rounded-md bg-accent", p.Class)} {...p.Attrs}></div>
ui/skeleton/Skeleton.fixtures.go
package skeleton

import "github.com/alternayte/gx"

var SkeletonFixtures = gx.Fixtures[SkeletonProps]{
	"Line":   {Class: "h-4 w-40"},
	"Circle": {Class: "size-10 rounded-full"},
	"Card":   {Class: "h-24 w-60"},
}

The theme must define these tokens: --accent.

Usage

<skeleton.Skeleton class="h-4 w-40" />

The skeleton uses the accent colour and a pulse.

Examples

Line

Open the preview in a new tab 

<skeleton.Skeleton class="h-4 w-40" />

Circle

Open the preview in a new tab 

<skeleton.Skeleton class="size-10 rounded-full" />

Card

Open the preview in a new tab 

<skeleton.Skeleton class="h-24 w-60" />

API reference

A tag sets a prop by its name with a lower-case first letter: Class is class.

skeleton.Skeleton

Prop Type Default Description
Class string "" Class adds classes to the root element.
Attrs gx.Attrs nil Attrs adds HTML attributes to the root element.

Do and do not

Do

  • Match the size of the content that replaces it.
  • Use two or three skeletons for a list.

Don't

  • Do not leave a skeleton on the page after the load finishes.
  • Do not show a skeleton for longer than a moment.

Keyboard

Key Action
None The component is static.