Skip to main content

lib/shadix/components/skeleton.ex

defmodule Shadix.Components.Skeleton do
  @moduledoc """
  Skeleton component, translated from the shadcn/ui `skeleton` component.

  Renders a `<div>` with `data-slot="skeleton"` used as a loading placeholder.

  The pulse animation respects `prefers-reduced-motion`: under reduced motion
  the `animate-pulse` loop is suppressed via `motion-reduce:animate-none`.
  """
  use Phoenix.Component
  import Shadix.Cn

  attr(:class, :string, default: nil)
  attr(:rest, :global)
  slot(:inner_block)

  def skeleton(assigns) do
    class = cn(["animate-pulse rounded-md bg-accent motion-reduce:animate-none", assigns.class])
    assigns = assign(assigns, :computed_class, class)

    ~H"""
    <div data-slot="skeleton" class={@computed_class} {@rest}>{render_slot(@inner_block)}</div>
    """
  end
end