skeleton

Skeleton is a component that can be used to show a loading state of a component.

Base Skeleton

skeleton = SingleValueFactory("skeleton", "A placeholder div with loading animation") # Base skeleton component

Skeleton Test Examples

---

source

test_skeleton_basic_examples

 test_skeleton_basic_examples ()

Test basic skeleton utilities.

def test_skeleton_basic_examples():
    """Test basic skeleton utilities."""
    # Basic skeleton
    assert str(skeleton) == "skeleton"
    
    # Skeleton with modifiers
    assert str(skeleton.hover) == "hover:skeleton"
    assert str(skeleton.md) == "md:skeleton"
    assert str(skeleton.dark) == "dark:skeleton"

# Run the tests
test_skeleton_basic_examples()

---

source

test_skeleton_basic_fasthtml_examples

 test_skeleton_basic_fasthtml_examples ()

Test basic skeleton from daisyUI v5 documentation.

def test_skeleton_basic_fasthtml_examples():
    """Test basic skeleton from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    
    # Basic skeleton
    basic_skeleton = Div(
        cls=combine_classes(skeleton, h._32, w._32)
    )
    
    # Verify structure
    assert basic_skeleton.tag == "div"
    assert "skeleton" in basic_skeleton.attrs['class']
    assert "h-32" in basic_skeleton.attrs['class']
    assert "w-32" in basic_skeleton.attrs['class']
    
    return basic_skeleton

# Run the tests
test_skeleton_basic_fasthtml_examples()

<div class="skeleton h-32 w-32"></div>

test_func = test_skeleton_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_skeleton_circle_with_content_fasthtml_examples

 test_skeleton_circle_with_content_fasthtml_examples ()

Test skeleton circle with content from daisyUI v5 documentation.

def test_skeleton_circle_with_content_fasthtml_examples():
    """Test skeleton circle with content from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex_direction, items, gap, shrink, flex_display
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    
    # Skeleton circle with content
    circle_with_content = Div(
        Div(
            Div(cls=combine_classes(skeleton, h._16, w._16, shrink._0, rounded.full)),
            Div(
                Div(cls=combine_classes(skeleton, h._4, w._20)),
                Div(cls=combine_classes(skeleton, h._4, w._28)),
                cls=combine_classes(flex_display, flex_direction.col, gap._4)
            ),
            cls=combine_classes(flex_display, items.center, gap._4)
        ),
        Div(cls=combine_classes(skeleton, h._32, w.full)),
        cls=combine_classes(flex_display, w._52, flex_direction.col, gap._4)
    )
    
    # Verify outer container
    assert circle_with_content.tag == "div"
    assert "flex" in circle_with_content.attrs['class']
    assert "w-52" in circle_with_content.attrs['class']
    assert "flex-col" in circle_with_content.attrs['class']
    assert "gap-4" in circle_with_content.attrs['class']
    
    # Verify first child (flex container with circle and text skeletons)
    first_child = circle_with_content.children[0]
    assert first_child.tag == "div"
    assert "flex" in first_child.attrs['class']
    assert "items-center" in first_child.attrs['class']
    assert "gap-4" in first_child.attrs['class']
    
    # Verify circle skeleton
    circle_skeleton = first_child.children[0]
    assert circle_skeleton.tag == "div"
    assert "skeleton" in circle_skeleton.attrs['class']
    assert "h-16" in circle_skeleton.attrs['class']
    assert "w-16" in circle_skeleton.attrs['class']
    assert "shrink-0" in circle_skeleton.attrs['class']
    assert "rounded-full" in circle_skeleton.attrs['class']
    
    # Verify text skeletons container
    text_container = first_child.children[1]
    assert text_container.tag == "div"
    assert "flex" in text_container.attrs['class']
    assert "flex-col" in text_container.attrs['class']
    assert "gap-4" in text_container.attrs['class']
    
    # Verify first text skeleton
    first_text = text_container.children[0]
    assert "skeleton" in first_text.attrs['class']
    assert "h-4" in first_text.attrs['class']
    assert "w-20" in first_text.attrs['class']
    
    # Verify second text skeleton
    second_text = text_container.children[1]
    assert "skeleton" in second_text.attrs['class']
    assert "h-4" in second_text.attrs['class']
    assert "w-28" in second_text.attrs['class']
    
    # Verify bottom skeleton
    bottom_skeleton = circle_with_content.children[1]
    assert bottom_skeleton.tag == "div"
    assert "skeleton" in bottom_skeleton.attrs['class']
    assert "h-32" in bottom_skeleton.attrs['class']
    assert "w-full" in bottom_skeleton.attrs['class']
    
    return circle_with_content

# Run the tests
test_skeleton_circle_with_content_fasthtml_examples()

<div class="flex w-52 flex-col gap-4">
  <div class="flex items-center gap-4">
    <div class="skeleton h-16 w-16 shrink-0 rounded-full"></div>
    <div class="flex flex-col gap-4">
      <div class="skeleton h-4 w-20"></div>
      <div class="skeleton h-4 w-28"></div>
    </div>
  </div>
  <div class="skeleton h-32 w-full"></div>
</div>

test_func = test_skeleton_circle_with_content_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_skeleton_rectangle_with_content_fasthtml_examples

 test_skeleton_rectangle_with_content_fasthtml_examples ()

Test skeleton rectangle with content from daisyUI v5 documentation.

def test_skeleton_rectangle_with_content_fasthtml_examples():
    """Test skeleton rectangle with content from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex_direction, gap, flex_display
    
    # Skeleton rectangle with content
    rectangle_with_content = Div(
        Div(cls=combine_classes(skeleton, h._32, w.full)),
        Div(cls=combine_classes(skeleton, h._4, w._28)),
        Div(cls=combine_classes(skeleton, h._4, w.full)),
        Div(cls=combine_classes(skeleton, h._4, w.full)),
        cls=combine_classes(flex_display, w._52, flex_direction.col, gap._4)
    )
    
    # Verify outer container
    assert rectangle_with_content.tag == "div"
    assert "flex" in rectangle_with_content.attrs['class']
    assert "w-52" in rectangle_with_content.attrs['class']
    assert "flex-col" in rectangle_with_content.attrs['class']
    assert "gap-4" in rectangle_with_content.attrs['class']
    
    # Verify children count
    assert len(rectangle_with_content.children) == 4
    
    # Verify first skeleton (large rectangle)
    first_skeleton = rectangle_with_content.children[0]
    assert first_skeleton.tag == "div"
    assert "skeleton" in first_skeleton.attrs['class']
    assert "h-32" in first_skeleton.attrs['class']
    assert "w-full" in first_skeleton.attrs['class']
    
    # Verify second skeleton (short line)
    second_skeleton = rectangle_with_content.children[1]
    assert second_skeleton.tag == "div"
    assert "skeleton" in second_skeleton.attrs['class']
    assert "h-4" in second_skeleton.attrs['class']
    assert "w-28" in second_skeleton.attrs['class']
    
    # Verify third skeleton (full width line)
    third_skeleton = rectangle_with_content.children[2]
    assert third_skeleton.tag == "div"
    assert "skeleton" in third_skeleton.attrs['class']
    assert "h-4" in third_skeleton.attrs['class']
    assert "w-full" in third_skeleton.attrs['class']
    
    # Verify fourth skeleton (full width line)
    fourth_skeleton = rectangle_with_content.children[3]
    assert fourth_skeleton.tag == "div"
    assert "skeleton" in fourth_skeleton.attrs['class']
    assert "h-4" in fourth_skeleton.attrs['class']
    assert "w-full" in fourth_skeleton.attrs['class']
    
    return rectangle_with_content

# Run the tests
test_skeleton_rectangle_with_content_fasthtml_examples()

<div class="flex w-52 flex-col gap-4">
  <div class="skeleton h-32 w-full"></div>
  <div class="skeleton h-4 w-28"></div>
  <div class="skeleton h-4 w-full"></div>
  <div class="skeleton h-4 w-full"></div>
</div>

test_func = test_skeleton_rectangle_with_content_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()