Skeleton

from starhtml import *
from starui import *

Card(
    CardHeader(
        Div(
            Skeleton(cls="h-12 w-12 rounded-full"),
            Div(
                Skeleton(cls="h-4 w-24 mb-2"),
                Skeleton(cls="h-3 w-16"),
                cls="ml-4"
            ),
            cls="flex items-center"
        )
    ),
    CardContent(
        Skeleton(cls="h-4 w-full mb-3"),
        Skeleton(cls="h-4 w-4/5 mb-3"),
        Skeleton(cls="h-4 w-3/4 mb-4"),
        Skeleton(cls="h-8 w-24 rounded")
    ),
    cls="w-80"
)

from starhtml import *
from starui import *

Div(
    Div(
        Div(
            Skeleton(cls="h-4 w-16"),
            Skeleton(cls="h-4 w-20"),
            Skeleton(cls="h-4 w-12"),
            Skeleton(cls="h-4 w-14"),
            cls="grid grid-cols-4 gap-4 py-3 px-4 border-b"
        ),
        cls="bg-muted/50"
    ),
    Div(
        *[
            Div(
                Div(
                    Skeleton(cls="h-8 w-8 rounded-full"),
                    Skeleton(cls="h-4 w-24 ml-2"),
                    cls="flex items-center"
                ),
                Skeleton(cls="h-4 w-32"),
                Skeleton(cls="h-5 w-16 rounded-full"),
                Skeleton(cls="h-6 w-6 rounded-full"),
                cls="grid grid-cols-4 gap-4 py-4 px-4 border-b border-border/50"
            )
            for _ in range(4)
        ],
    ),
    cls="w-full max-w-3xl border rounded-lg overflow-hidden"
)

from starhtml import *
from starui import *

loading = Signal("loading", True)

Div(
    loading,
    H4("Loading State Toggle", cls="text-lg font-medium mb-2"),
    Div(
        Button(
            data_text=loading.if_("Stop Loading", "Start Loading"),
            data_on_click=loading.toggle(),
            variant="outline",
            cls="mb-4"
        ),
        Div(
            Skeleton(cls="h-6 w-40 mb-2"),
            Skeleton(cls="h-4 w-80 mb-4"),
            Skeleton(cls="h-20 w-full rounded-lg"),
            data_show=loading
        ),
        Div(
            H4("Content Loaded!", cls="text-lg font-semibold mb-2"),
            P("This content appears when loading is complete.", cls="mb-4"),
            Div(
                "This is the actual content that would load.",
                cls="p-4 bg-muted rounded-lg"
            ),
            data_show=~loading
        ),
        cls="p-4 border rounded-lg"
    )
)