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

{% comment %}
Detail Page Skeleton Component
==============================

Animated skeleton placeholder for detail pages while content loads.

Purpose:
    Displays pulsing skeleton elements for detail page layouts including
    header, image, and content sections.

Usage Examples:
    Basic detail skeleton:
        {% include 'components/skeletons/detail_skeleton.html' %}

    With image placeholder:
        {% include 'components/skeletons/detail_skeleton.html' with show_image=True %}

    Custom content sections:
        {% include 'components/skeletons/detail_skeleton.html' with sections=4 %}

Parameters:
    Optional:
    - show_image: Show large image placeholder (default: True)
    - show_badge: Show status badge placeholder (default: True)
    - show_meta: Show metadata row (default: True)
    - show_actions: Show action buttons placeholder (default: True)
    - sections: Number of content sections (default: 3)
    - paragraphs_per_section: Lines per section (default: 4)
    - 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 show_image=show_image|default:True show_badge=show_badge|default:True show_meta=show_meta|default:True show_actions=show_actions|default:True sections=sections|default:3 paragraphs_per_section=paragraphs_per_section|default:4 animate=animate|default:True %}

<div class="skeleton-detail space-y-6"
     role="status"
     aria-busy="true"
     aria-label="Loading page content...">

    {# Header Section #}
    <div class="skeleton-detail-header space-y-4">
        {# Breadcrumb placeholder #}
        <div class="flex items-center gap-2">
            <div class="h-3 w-12 bg-muted rounded {% if animate %}animate-pulse{% endif %}"></div>
            <div class="h-3 w-3 bg-muted rounded {% if animate %}animate-pulse{% endif %}"></div>
            <div class="h-3 w-20 bg-muted rounded {% if animate %}animate-pulse{% endif %}"></div>
            <div class="h-3 w-3 bg-muted rounded {% if animate %}animate-pulse{% endif %}"></div>
            <div class="h-3 w-32 bg-muted rounded {% if animate %}animate-pulse{% endif %}"></div>
        </div>

        {# Title and badge row #}
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div class="space-y-2">
                {# Title #}
                <div class="h-8 sm:h-10 w-64 sm:w-80 bg-muted rounded {% if animate %}animate-pulse{% endif %}"></div>

                {# Subtitle/location #}
                <div class="h-4 w-48 bg-muted/70 rounded {% if animate %}animate-pulse{% endif %}" style="animation-delay: 100ms;"></div>
            </div>

            {% if show_badge %}
            {# Status badge #}
            <div class="h-7 w-24 bg-muted rounded-full {% if animate %}animate-pulse{% endif %}"></div>
            {% endif %}
        </div>

        {# Meta row (date, author, etc.) #}
        {% if show_meta %}
        <div class="flex flex-wrap items-center gap-4 text-sm">
            <div class="h-4 w-32 bg-muted/60 rounded {% if animate %}animate-pulse{% endif %}" style="animation-delay: 150ms;"></div>
            <div class="h-4 w-24 bg-muted/60 rounded {% if animate %}animate-pulse{% endif %}" style="animation-delay: 200ms;"></div>
            <div class="h-4 w-28 bg-muted/60 rounded {% if animate %}animate-pulse{% endif %}" style="animation-delay: 250ms;"></div>
        </div>
        {% endif %}

        {# Action buttons #}
        {% if show_actions %}
        <div class="flex flex-wrap gap-3">
            <div class="h-10 w-28 bg-muted rounded-lg {% if animate %}animate-pulse{% endif %}"></div>
            <div class="h-10 w-24 bg-muted/80 rounded-lg {% if animate %}animate-pulse{% endif %}" style="animation-delay: 50ms;"></div>
            <div class="h-10 w-10 bg-muted/60 rounded-lg {% if animate %}animate-pulse{% endif %}" style="animation-delay: 100ms;"></div>
        </div>
        {% endif %}
    </div>

    {# Image Section #}
    {% if show_image %}
    <div class="skeleton-detail-image">
        <div class="w-full aspect-video bg-muted rounded-xl {% if animate %}animate-pulse{% endif %}"></div>
    </div>
    {% endif %}

    {# Content Sections #}
    <div class="skeleton-detail-content space-y-8">
        {% for s in "1234567890"|slice:sections %}
        <div class="space-y-3">
            {# Section heading #}
            <div class="h-6 w-48 bg-muted rounded {% if animate %}animate-pulse{% endif %}" style="animation-delay: {{ forloop.counter0 }}50ms;"></div>

            {# Paragraph lines #}
            {% for p in "12345678"|slice:paragraphs_per_section %}
            <div class="h-4 bg-muted/{% if forloop.last %}50{% else %}70{% endif %} rounded {% if animate %}animate-pulse{% endif %}"
                 style="width: {% if forloop.last %}65{% else %}{% widthratio forloop.counter0 1 5 %}5{% endif %}%; animation-delay: {{ forloop.counter }}00ms;">
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>

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

{% endwith %}