Skeleton

from starhtml import *

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

from starhtml import *

loading = Signal("skeleton_loading", True)

Div(
    loading,
    Button(
        data_text=loading.if_("Stop Loading", "Start Loading"),
        data_on_click=loading.toggle(),
        variant="outline",
        size="sm",
        cls="mb-4 w-28"
    ),
    Div(
        Div(
            Skeleton(cls="mb-3 h-7 w-48"),
            Skeleton(cls="mb-2 h-5 w-full"),
            Skeleton(cls="h-5 w-3/5"),
            cls="col-start-1 row-start-1",
            data_attr_cls=loading.if_("", "invisible")
        ),
        Div(
            Div("Dashboard Overview", cls="mb-3 text-lg font-semibold"),
            Div("Your weekly activity is up 12% compared to last period.", cls="mb-2 text-sm text-muted-foreground"),
            Div("Keep it up — you're on track to hit your monthly goal.", cls="text-sm text-muted-foreground"),
            cls="col-start-1 row-start-1",
            data_attr_cls=loading.if_("invisible", "")
        ),
        cls="grid"
    ),
)