thrillwiki_django_no_react/backend/templates/components/skeletons/table_skeleton.html

{% comment %}
Table Skeleton Component
========================

Animated skeleton placeholder for data tables while content loads.

Purpose:
    Displays pulsing skeleton table rows for data-heavy pages like
    admin dashboards, moderation queues, and data exports.

Usage Examples:
    Basic table skeleton:
        {% include 'components/skeletons/table_skeleton.html' %}

    Custom dimensions:
        {% include 'components/skeletons/table_skeleton.html' with rows=10 cols=6 %}

    With checkbox column:
        {% include 'components/skeletons/table_skeleton.html' with show_checkbox=True %}

    With action column:
        {% include 'components/skeletons/table_skeleton.html' with show_actions=True %}

Parameters:
    Optional:
    - rows: Number of table rows (default: 5)
    - cols: Number of data columns (default: 4)
    - show_header: Show table header row (default: True)
    - show_checkbox: Show checkbox column (default: False)
    - show_actions: Show actions column (default: True)
    - show_avatar: Show avatar in first column (default: False)
    - striped: Use striped row styling (default: False)
    - animate: Enable pulse animation (default: True)

Dependencies:
    - Tailwind CSS for styling and animation

Accessibility:
    - Uses role="status" and aria-busy="true" for screen readers
{% endcomment %}

{% with rows=rows|default:5 cols=cols|default:4 show_header=show_header|default:True show_checkbox=show_checkbox|default:False show_actions=show_actions|default:True show_avatar=show_avatar|default:False striped=striped|default:False animate=animate|default:True %}

<div class="skeleton-table overflow-hidden rounded-lg border border-border"
     role="status"
     aria-busy="true"
     aria-label="Loading table data...">

    <table class="w-full">
        {# Table Header #}
        {% if show_header %}
        <thead class="bg-muted/30">
            <tr>
                {# Checkbox header #}
                {% if show_checkbox %}
                <th class="w-12 p-4">
                    <div class="w-5 h-5 bg-muted rounded {% if animate %}animate-pulse{% endif %}"></div>
                </th>
                {% endif %}

                {# Data column headers #}
                {% for c in "12345678"|slice:cols %}
                <th class="p-4 text-left">
                    <div class="h-4 bg-muted rounded {% if animate %}animate-pulse{% endif %}"
                         style="width: {% widthratio forloop.counter0 1 4 %}5%; animation-delay: {{ forloop.counter0 }}25ms;">
                    </div>
                </th>
                {% endfor %}

                {# Actions header #}
                {% if show_actions %}
                <th class="w-28 p-4 text-right">
                    <div class="h-4 w-16 bg-muted rounded ml-auto {% if animate %}animate-pulse{% endif %}"></div>
                </th>
                {% endif %}
            </tr>
        </thead>
        {% endif %}

        {# Table Body #}
        <tbody class="divide-y divide-border">
            {% for r in "12345678901234567890"|slice:rows %}
            <tr class="{% if striped and forloop.counter|divisibleby:2 %}bg-muted/10{% endif %}">
                {# Checkbox cell #}
                {% if show_checkbox %}
                <td class="p-4">
                    <div class="w-5 h-5 bg-muted/70 rounded border border-muted {% if animate %}animate-pulse{% endif %}"
                         style="animation-delay: {{ forloop.counter0 }}50ms;">
                    </div>
                </td>
                {% endif %}

                {# Data cells #}
                {% for c in "12345678"|slice:cols %}
                <td class="p-4">
                    {% if forloop.first and show_avatar %}
                    {# First column with avatar #}
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-muted {% if animate %}animate-pulse{% endif %}"
                             style="animation-delay: {{ forloop.parentloop.counter0 }}25ms;">
                        </div>
                        <div class="space-y-1">
                            <div class="h-4 w-24 bg-muted rounded {% if animate %}animate-pulse{% endif %}"
                                 style="animation-delay: {{ forloop.parentloop.counter0 }}50ms;">
                            </div>
                            <div class="h-3 w-32 bg-muted/60 rounded {% if animate %}animate-pulse{% endif %}"
                                 style="animation-delay: {{ forloop.parentloop.counter0 }}75ms;">
                            </div>
                        </div>
                    </div>
                    {% else %}
                    {# Regular data cell #}
                    <div class="h-4 bg-muted/70 rounded {% if animate %}animate-pulse{% endif %}"
                         style="width: {% widthratio forloop.counter0 cols 100 %}%; min-width: 40%; animation-delay: {{ forloop.parentloop.counter0 }}{{ forloop.counter0 }}0ms;">
                    </div>
                    {% endif %}
                </td>
                {% endfor %}

                {# Actions cell #}
                {% if show_actions %}
                <td class="p-4">
                    <div class="flex items-center justify-end gap-2">
                        <div class="w-8 h-8 bg-muted/60 rounded {% if animate %}animate-pulse{% endif %}"></div>
                        <div class="w-8 h-8 bg-muted/60 rounded {% if animate %}animate-pulse{% endif %}" style="animation-delay: 50ms;"></div>
                    </div>
                </td>
                {% endif %}
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <span class="sr-only">Loading table data, please wait...</span>
</div>

{% endwith %}