{# Skeleton loading patterns — canonical renderers (cycle 247).
Contract: ~/.claude/skills/ux-architect/components/parking-lot-primitives.md
Usage:
{% from "fragments/skeleton_patterns.html"
import skeleton_table_rows, skeleton_card, skeleton_cards, skeleton_detail %}
Each macro renders a shimmer placeholder shape. Uses a single
``dz-skeleton`` class with the canonical pulse animation defined in
``design-system.css`` (cycle 247 — if not already present, the
framework CSS should define the keyframes + base class). Pre-cycle-247
used DaisyUI `skeleton` + `card` + `p-4` classes.
#}
{% macro skeleton_table_rows(rows=5, cols=4) %}
{# Skeleton table body — shimmer rows for table loading state #}
{% for _ in range(rows) %}
{% for _ in range(cols) %}
|
{% endfor %}
{% endfor %}
{% endmacro %}
{% macro skeleton_card() %}
{# Skeleton card — shimmer card for grid loading state #}
{% endmacro %}
{% macro skeleton_detail() %}
{# Skeleton detail view — shimmer fields for detail loading state #}
{% for _ in range(4) %}
{% endfor %}
{% endmacro %}
{% macro skeleton_cards(count=6) %}
{# Grid of skeleton cards — matches the responsive breakpoints used
by the metrics region and other grid regions. #}
{% for _ in range(count) %}
{{ skeleton_card() }}
{% endfor %}
{% endmacro %}