Skeleton

import reflex_ui as ui

ui.skeleton(class_name="h-4 w-64 rounded")

rx.vstack(
    ui.skeleton(class_name="h-4 w-full rounded"),
    ui.skeleton(class_name="h-4 w-5/6 rounded"),
    ui.skeleton(class_name="h-4 w-4/6 rounded"),
    spacing="0.5rem"
)

rx.box(
    rx.vstack(
        ui.skeleton(class_name="h-48 w-full rounded-lg"),  # Image
        ui.skeleton(class_name="h-6 w-3/4 rounded"),       # Title
        ui.skeleton(class_name="h-4 w-full rounded"),       # Description line 1
        ui.skeleton(class_name="h-4 w-5/6 rounded"),       # Description line 2
        spacing="1rem"
    ),
    padding="1.5rem",
    border="1px solid var(--gray-4)",
    border_radius="0.5rem"
)

ui.skeleton(class_name="size-12 rounded-full")

ui.skeleton(class_name="h-10 w-24 rounded-md")

rx.hstack(
    ui.skeleton(class_name="size-12 rounded-full"),  # Avatar
    rx.vstack(
        ui.skeleton(class_name="h-4 w-32 rounded"),   # Name
        ui.skeleton(class_name="h-3 w-24 rounded"),   # Email
        spacing="0.5rem",
        align_items="flex-start"
    ),
    spacing="1rem"
)

rx.vstack(
    # Header
    rx.hstack(
        ui.skeleton(class_name="h-4 w-24 rounded"),
        ui.skeleton(class_name="h-4 w-32 rounded"),
        ui.skeleton(class_name="h-4 w-20 rounded"),
        spacing="1rem",
        width="100%"
    ),
    # Rows
    *[
        rx.hstack(
            ui.skeleton(class_name="h-4 w-24 rounded"),
            ui.skeleton(class_name="h-4 w-32 rounded"),
            ui.skeleton(class_name="h-4 w-20 rounded"),
            spacing="1rem",
            width="100%"
        )
        for _ in range(5)
    ],
    spacing="1rem",
    width="100%"
)

class State(rx.State):
    is_loading: bool = True
    data: str = ""

    async def load_data(self):
        self.is_loading = True
        yield
        # Simulate API call
        await asyncio.sleep(2)
        self.data = "Loaded content"
        self.is_loading = False

rx.cond(
    State.is_loading,
    ui.skeleton(class_name="h-20 w-full rounded-lg"),
    rx.box(State.data, padding="1rem", border="1px solid gray")
)