SkeletonScreenProfileContentComponent

InfoGeneratePackages

This Ruby class, named SkeletonCircleWithContentComponent, appears to be a custom UI component for a web application built using Ruby on Rails. It inherits behaviors from a base class named ApplicationComponent, indicating it's part of the View-Component gem or a similar library designed to handle view components in Rails. The primary method, `template`, defines the structure and styling of the component using a DSL (Domain-Specific Language) for HTML generation. Within this method, a series of nested `div` elements are created, each with specific CSS classes. These classes suggest the component is designed to display a skeleton screen, a technique used in UI design to enhance the perception of loading performance by showing placeholders for content before the actual content loads. The skeleton elements include a circular shape (`rounded-full`) meant to mimic an avatar or profile picture, alongside rectangular shapes of different sizes meant to represent text or other content elements. The use of classes like `flex`, `gap-4`, and `w-52` indicate that Tailwind CSS, a utility-first CSS framework, is being used for styling.

# frozen_string_literal: true

class SkeletonCircleWithContentComponent < ApplicationComponent
  def template
    div(class: "flex flex-col gap-4 w-52") do
      div(class: "flex gap-4 items-center") do
        div(class: "skeleton w-16 h-16 rounded-full shrink-0")
        div(class: "flex flex-col gap-4") do
          div(class: "skeleton h-4 w-20")
          div(class: "skeleton h-4 w-28")
        end
      end
      div(class: "skeleton h-32 w-full")
    end
  end
end