GkSkeletonLoader

A placeholder surface modeled after Vuetify’s VSkeletonLoader: type selects a preset graph of “bones” (text bars, avatars, image blocks, …), rendered recursively with a shimmer overlay. When there is no default slot, the skeleton shows; when there is a default slot, the skeleton shows only while loading is true.

Use boilerplate for static placeholders (no role="alert" / live region). Otherwise the loading root exposes aria-live="polite", role="alert", and aria-label from loadingText.

There is no theme / locale composable layer — loadingText is a plain string (defaults to Loading).

When to use

Use as a visual placeholder while async content is loading, especially in cards, feed items, and table-heavy surfaces.

Live Examples

Card preset

Skeleton-only mode with type card and loading true.

vue

<script setup lang="ts">
import { GkSkeletonLoader } from 'god-kit/vue'
</script>

<template>
  <GkSkeletonLoader type="card" loading />
</template>

Swap with content

When a default slot exists, loading toggles between bones and real markup.

vue

<script setup lang="ts">
import { GkButton, GkSkeletonLoader } from 'god-kit/vue'
import { ref } from 'vue'

const loading = ref(true)
</script>

<template>
  <div class="gk-doc-stack">
    <GkButton type="button" variant="secondary" @click="loading = !loading">
      {{ loading ? 'Show content' : 'Show skeleton' }}
    </GkButton>
    <GkSkeletonLoader :loading="loading" type="card" loading-text="Loading card">
      <div class="gk-doc-skeleton-demo__content">
        <p class="gk-doc-skeleton-demo__title">Loaded card</p>
        <p class="gk-doc-skeleton-demo__body">
          Default slot content appears when <code>loading</code> is false.
        </p>
      </div>
    </GkSkeletonLoader>
  </div>
</template>

<style scoped>
.gk-doc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-4);
}

.gk-doc-skeleton-demo__content {
  padding: var(--gk-space-3);
  border: 1px solid var(--gk-color-border);
  border-radius: var(--gk-radius-md);
}

.gk-doc-skeleton-demo__title {
  margin: 0 0 var(--gk-space-2);
  font-size: var(--gk-font-size-md);
}

.gk-doc-skeleton-demo__body {
  margin: 0;
  font-size: var(--gk-font-size-sm);
  color: var(--gk-color-text-muted);
}
</style>

Boilerplate list row

boilerplate disables live-region semantics for decorative placeholders.

vue

<script setup lang="ts">
import { GkSkeletonLoader } from 'god-kit/vue'
</script>

<template>
  <GkSkeletonLoader
    type="list-item-avatar"
    boilerplate
    class="gk-doc-skeleton-demo--mt"
  />
</template>

<style scoped>
.gk-doc-skeleton-demo--mt {
  max-width: 24rem;
}
</style>

API

Props

Prop	Type	Default	Description
loading	boolean	false	When a default slot exists, show skeleton while true
type	GkSkeletonLoaderType, string, or array	'ossein'	Preset key(s); arrays are joined with commas (e.g. ['heading','paragraph'])
boilerplate	boolean	false	Decorative only — disables shimmer and alert semantics
loadingText	string	'Loading'	aria-label when not boilerplate
color	string	—	Sets --gk-skeleton-loader-wave for the shimmer highlight
width / height / maxWidth / maxHeight	number | string	—	Applied to the root
elevation	0–5	—	Shadow preset on the root

Additional attributes are forwarded to the skeleton root (not to bones).

Slots

Slot	Description
default	Real content; shown when loading is false (or omitted with no loading when the slot is present)

Presets

Keys are listed on gkSkeletonRootTypes (exported from god-kit/vue). Examples: card, article, table, list-item-avatar, date-picker, paragraph, ossein.

Utilities

Export	Description
genGkSkeletonStructure(type)	Returns a GkSkeletonNode[] tree for tests or custom renderers
wrapGkSkeletonTypes(type)	Normalizes type to a comma-separated string
isGkSkeletonLoaderType(value)	Type guard for preset keys

Tokens

Token	Purpose
--gk-skeleton-loader-track	Bone base fill
--gk-skeleton-loader-wave	Shimmer highlight
--gk-skeleton-loader-shimmer-duration	Animation length
--gk-skeleton-loader-*-height / -size	Bone dimensions

Examples

Each scenario under Live Examples includes a copyable Vue snippet (source is imported from the same SFC as the preview).

Accessibility notes

• Use boilerplate for decorative placeholders that should not announce loading state.
• Keep loadingText specific when skeletons represent long-running async operations.

Related components

• GkSpinner
• GkSnackbar
• GkAlert