Class: UI::SidebarMenuSkeleton

Inherits:
Phlex::HTML
  • Object
show all
Includes:
SidebarMenuSkeletonBehavior
Defined in:
app/components/ui/sidebar_menu_skeleton.rb

Overview

MenuSkeleton - Phlex implementation

Loading skeleton for sidebar menu items. Shows animated placeholders for icon and text.

Examples:

Basic usage

render UI::MenuSkeleton.new

Hide icon placeholder

render UI::MenuSkeleton.new(show_icon: false)

Multiple skeletons

5.times { render UI::MenuSkeleton.new }

Constant Summary collapse

WIDTHS =

Random widths for text skeleton to look more natural

%w[60% 70% 80% 90% 50%].freeze

Instance Method Summary collapse

Methods included from SidebarMenuSkeletonBehavior

#sidebar_menu_skeleton_classes, #sidebar_menu_skeleton_data_attributes, #sidebar_menu_skeleton_html_attributes

Constructor Details

#initialize(show_icon: true, classes: "", **attributes) ⇒ SidebarMenuSkeleton

Returns a new instance of SidebarMenuSkeleton.



22
23
24
25
26
 
# File 'app/components/ui/sidebar_menu_skeleton.rb', line 22

def initialize(show_icon: true, classes: "", **attributes)
  @show_icon = show_icon
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#view_template ⇒ Object 



28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
# File 'app/components/ui/sidebar_menu_skeleton.rb', line 28

def view_template
  all_attributes = sidebar_menu_skeleton_html_attributes

  if @attributes.key?(:class)
    merged_class = TailwindMerge::Merger.new.merge([
      all_attributes[:class],
      @attributes[:class]
    ].compact.join(" "))
    all_attributes = all_attributes.merge(class: merged_class)
  end

  all_attributes = all_attributes.deep_merge(@attributes.except(:class))

  div(**all_attributes) do
    if @show_icon
      # Icon skeleton
      div(
        class: "size-4 rounded-md bg-sidebar-accent animate-pulse",
        data: {slot: "sidebar-menu-skeleton-icon"}
      )
    end
    # Text skeleton with random width
    div(
      class: "h-4 max-w-[var(--skeleton-width)] flex-1 rounded-md bg-sidebar-accent animate-pulse",
      style: "--skeleton-width: #{random_width}",
      data: {slot: "sidebar-menu-skeleton-text"}
    )
  end
end