Skeleton

Basic skeleton example demonstrating core behavior.

Package: @solidiom/skeleton
Version: 0.0.1-next.0
Status: stable

Examples

import * as Skeleton from "@solidiom/skeleton"

;<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
  <Skeleton.Root variant="text" width={300} />
  <Skeleton.Root variant="rectangular" width={300} height={100} />
  <Skeleton.Root variant="circular" width={40} height={40} />

  <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
    <Skeleton.Root variant="circular" width={48} height={48} />
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <Skeleton.Root variant="text" width={140} />
      <Skeleton.Root variant="text" width={200} />
    </div>
  </div>
</div>

The skeleton is purely decorative and marked aria-hidden="true". Use the variant prop (“text”, “circular”, “rectangular”) and explicit width/height to match the shapes of content being loaded.

View source

        export function Root(props: SkeletonRootProps) {
  const variant = () => props.variant ?? "text"

  const computedStyle = (): JSX.CSSProperties | string => {
    const w = props.width
    const h = props.height
    if (!w && !h) return props.style ?? {}
    const base: JSX.CSSProperties = typeof props.style === "object" ? (props.style ?? {}) : {}
    return {
      ...base,
      ...(w != null ? { width: typeof w === "number" ? `${w}px` : w } : {}),
      ...(h != null ? { height: typeof h === "number" ? `${h}px` : h } : {}),
    }
  }

  return (
    <div
      aria-hidden="true"
      class={props.class}
      style={computedStyle()}
      data-variant={variant()}
      {...applySemanticAttrs({ scope: "skeleton", part: "root" })}
    />
  )
}