Skeleton | RiseUI

Loading placeholders matching HeroUI skeleton.css (surface-tertiary/70, rounded-sm, shimmer | pulse | none) and Storybook Default / Grid / SingleShimmer layouts.

Usage

Default story — 200px surface card, hero block + three `h-3` lines (`rounded-lg`).

SizedBox(
  width: 200,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(24),
    child: RiseSurface(
      variant: RiseSurfaceVariant.default_,
      padding: EdgeInsets.all(16),
      borderRadius: 24,
      showShadow: true,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          RiseSkeleton(height: 96, borderRadius: 12),
          SizedBox(height: 20),
          RiseSkeletonGroup(
            spacing: 12,
            children: [
              RiseSkeleton(height: 12, borderRadius: 8, width: 100.8),
              RiseSkeleton(height: 12, borderRadius: 8, width: 134.4),
              RiseSkeleton(height: 12, borderRadius: 8, width: 67.2),
            ],
          ),
        ],
      ),
    ),
  ),
)

Text content

Stacked lines with `space-y-3`-style spacing.

RiseSkeletonGroup(
  spacing: 12,
  children: [
    RiseSkeleton(height: 12, borderRadius: 8),
    RiseSkeleton(height: 12, borderRadius: 8),
    RiseSkeleton(width: 180, height: 12, borderRadius: 8),
  ],
)

User profile

Avatar circle + two text lines.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    RiseSkeleton(width: 48, height: 48, borderRadius: 24),
    SizedBox(width: 12),
    Expanded(
      child: RiseSkeletonGroup(
        spacing: 8,
        children: [
          RiseSkeleton(height: 12, borderRadius: 8),
          RiseSkeleton(width: 96, height: 12, borderRadius: 8),
        ],
      ),
    ),
  ],
)

List items

Repeated row pattern (line + short pill).

RiseSkeletonGroup(
  spacing: 16,
  children: [
    Row(
      children: [
        Expanded(child: RiseSkeleton(height: 12, borderRadius: 8)),
        SizedBox(width: 10),
        RiseSkeleton(width: 52, height: 12, borderRadius: 6),
      ],
    ),
    // …repeat rows
  ],
)

Animation types

Shimmer, pulse (`animate-pulse`), and none — `h-24` blocks.

Row(
  children: [
    Expanded(
      child: RiseSkeleton(height: 96, borderRadius: 12, animationType: RiseSkeletonAnimation.shimmer),
    ),
    SizedBox(width: 12),
    Expanded(
      child: RiseSkeleton(height: 96, borderRadius: 12, animationType: RiseSkeletonAnimation.pulse),
    ),
    SizedBox(width: 12),
    Expanded(
      child: RiseSkeleton(height: 96, borderRadius: 12, animationType: RiseSkeletonAnimation.none),
    ),
  ],
)

Grid

Storybook `Grid` — 450× row, three `h-24` `rounded-xl` cells, `gap-4`.

SizedBox(
  width: 450,
  child: Row(
    children: [
      Expanded(child: RiseSkeleton(height: 96, borderRadius: 12)),
      SizedBox(width: 16),
      Expanded(child: RiseSkeleton(height: 96, borderRadius: 12)),
      SizedBox(width: 16),
      Expanded(child: RiseSkeleton(height: 96, borderRadius: 12)),
    ],
  ),
)

Synchronized shimmer

Storybook `SingleShimmer` geometry — [RiseSkeletonSyncShimmer] shares one sweep phase.

SizedBox(
  width: 450,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(12),
    child: RiseSkeletonSyncShimmer(
      child: Row(
        children: [
          Expanded(
            child: RiseSkeleton(
              height: 96,
              borderRadius: 12,
              animationType: RiseSkeletonAnimation.shimmer,
            ),
          ),
          SizedBox(width: 16),
          Expanded(
            child: RiseSkeleton(
              height: 96,
              borderRadius: 12,
              animationType: RiseSkeletonAnimation.shimmer,
            ),
          ),
          SizedBox(width: 16),
          Expanded(
            child: RiseSkeleton(
              height: 96,
              borderRadius: 12,
              animationType: RiseSkeletonAnimation.shimmer,
            ),
          ),
        ],
      ),
    ),
  ),
)