{# 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.

   v0.62 CSS refactor: inline Tailwind → semantic .dz-skeleton-* classes
   (components/fragments.css). Single .dz-skeleton class with the
   canonical pulse animation; size variants via .dz-skeleton-h-{n} +
   .dz-skeleton-w-{frac} modifier classes (replaces inline `h-4 w-3/4`
   Tailwind on every shimmer rectangle). #}

{% macro skeleton_table_rows(rows=5, cols=4) %}
{# Skeleton table body — shimmer rows for table loading state #}
{% for _ in range(rows) %}
<tr>
  {% for _ in range(cols) %}
  <td class="dz-skeleton-table-cell"><div class="dz-skeleton dz-skeleton-h-4 dz-skeleton-w-full"></div></td>
  {% endfor %}
</tr>
{% endfor %}
{% endmacro %}

{% macro skeleton_card() %}
{# Skeleton card — shimmer card for grid loading state #}
<div class="dz-skeleton-card">
  <div class="dz-skeleton-card-stack">
    <div class="dz-skeleton dz-skeleton-h-4 dz-skeleton-w-3-4"></div>
    <div class="dz-skeleton dz-skeleton-h-3 dz-skeleton-w-1-2"></div>
    <div class="dz-skeleton dz-skeleton-h-3 dz-skeleton-w-full"></div>
    <div class="dz-skeleton dz-skeleton-h-3 dz-skeleton-w-5-6"></div>
  </div>
</div>
{% endmacro %}

{% macro skeleton_detail() %}
{# Skeleton detail view — shimmer fields for detail loading state #}
<div class="dz-skeleton-detail">
  <div class="dz-skeleton dz-skeleton-h-6 dz-skeleton-w-1-3"></div>
  {% for _ in range(4) %}
  <div class="dz-skeleton-detail-row">
    <div class="dz-skeleton dz-skeleton-h-4 dz-skeleton-w-24"></div>
    <div class="dz-skeleton dz-skeleton-h-4 dz-skeleton-w-48"></div>
  </div>
  {% endfor %}
</div>
{% endmacro %}

{% macro skeleton_cards(count=6) %}
{# Grid of skeleton cards — matches the responsive breakpoints used
   by the metrics region and other grid regions. #}
<div class="dz-skeleton-cards-grid">
  {% for _ in range(count) %}
  {{ skeleton_card() }}
  {% endfor %}
</div>
{% endmacro %}