SkeletonScreenProfileContentComponent
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