Skeleton

render Skeleton.new(class: "h-6 w-24")
render Skeleton.new(class: "h-6 w-48")
render Skeleton.new(class: "h-6 w-36")

Installation

Add the component to your project

CLI

Run the following command in your terminal

bundle exec essence add skeleton

Manually

Copy and paste the following code into your project

components/skeleton.rb

# frozen_string_literal: true

# A skeleton component is used to show a loading state.
#
# ==== Examples
#
#    render Skeleton.new(class: "w-32 h-6")
#
# ==== Documentation
#
# https://essence.primevise.com/components/skeleton
#
class Components::Skeleton < Components::Essence
  BASE = "animate-pulse bg-gray-200/55 rounded-xs"

  def initialize(**attributes)
    super(**attributes)
  end

  def view_template(&)
    div(**@attributes, &)
  end

  private

  def initialize_merged_classes = merge_classes([ BASE, @attributes[:class] ])
end