{# bfx/loading.html — Loading spinner and skeleton macros #}

{% macro loading_spinner(size="1.5rem", attrs={}) %}
<span aria-busy="true" aria-label="Loading" role="status" class="htmx-indicator"
  style="display:inline-block;width:{{ size }};height:{{ size }};"
  {% for key, val in attrs.items() %} {{ key }}="{{ val }}"{% endfor %}
></span>
{% endmacro %}

{% macro loading_skeleton(lines=3, attrs={}) %}
<div class="loading-skeleton" aria-busy="true"
  {% for key, val in attrs.items() %} {{ key }}="{{ val }}"{% endfor %}
>
  {% for _ in range(lines) %}
  <div class="skeleton-line" style="height:1em;background:var(--pico-muted-border-color);border-radius:0.25rem;margin-bottom:0.5rem;{% if not loop.last %}width:{{ [100, 85, 70, 90, 60][loop.index0 % 5] }}%;{% else %}width:{{ [45, 55, 65][loop.index0 % 3] }}%;{% endif %}"></div>
  {% endfor %}
</div>
{% endmacro %}