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

# 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