Components / Skeleton

Skeleton

Stable

loading placeholders

Usage example #

Copy this ERB into a Rails view after installing the component. The snippet below is the same code used by the live preview above.

app/views/.../skeleton_example.html.erb

<div class="w-full max-w-sm space-y-3">
  <%= render Senren::SkeletonComponent.new(class_name: "h-4 w-3/4") %>
  <%= render Senren::SkeletonComponent.new(class_name: "h-4 w-full") %>
  <%= render Senren::SkeletonComponent.new(class_name: "h-4 w-5/6") %>
  <div class="flex items-center gap-3 pt-2">
    <%= render Senren::SkeletonComponent.new(class_name: "h-10 w-10 rounded-full") %>
    <div class="flex-1 space-y-2">
      <%= render Senren::SkeletonComponent.new(class_name: "h-3 w-32") %>
      <%= render Senren::SkeletonComponent.new(class_name: "h-3 w-24") %>
    </div>
  </div>
</div>

Install this component #

Copy the official component into your app

Use this when you want the Senren-maintained implementation copied into app/components/senren.

Terminal

bin/rails senren:add skeleton

Create a custom component with the same conventions

Use this when you need an app-specific static component that follows Senren's ViewComponent structure.

Terminal

bin/rails generate senren:component skeleton --no-client

At a glance #

Category Data

Class name Senren::SkeletonComponent

Stimulus —

Variants default, circle, text

Depends on —

Pairs with card, table

Source #

app/components/senren/skeleton_component.html.erb

<%= tag.div "", **root_attrs("animate-pulse bg-[hsl(var(--senren-muted))]", "aria-hidden": "true") %>

app/components/senren/skeleton_component.rb

# frozen_string_literal: true

module Senren
  class SkeletonComponent < BaseComponent
    VARIANTS = {
      default: 'rounded-(--senren-radius)',
      circle: 'rounded-full',
      text: 'rounded-md h-4'
    }.freeze

    SIZES = { md: '' }.freeze
  end
end

AI agent rules #

Use for

+loading placeholders

Avoid

-permanent decoration

Accessibility #

aria-hidden=true while loading; pair with aria-busy on parent.

Separator

Avatar