Add standardized HTMX conventions, interaction patterns, and migration guide for ThrillWiki UX

backend/templates/components/skeletons/detail_skeleton.html

@@ -0,0 +1,118 @@
+{% 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 %}