From 32d730178829ddb16b271bd9f3331b33b19ac19d Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Thu, 4 Jun 2026 11:28:34 +0200
Subject: [PATCH] feat: add loading fragment templates and optimize section
 triggers

---
 templates/anime.gohtml                  | 33 ++++++++++++++++++++++---
 templates/components/watch_order.gohtml | 12 +++++++++
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/templates/anime.gohtml b/templates/anime.gohtml
index 555a397..682fb8c 100644
--- a/templates/anime.gohtml
+++ b/templates/anime.gohtml
@@ -38,6 +38,26 @@
 {{end}}
 {{end}}
 
+{{define "anime_recommendations_loading"}}
+<div
+  hx-get="/anime/{{.AnimeID}}?section=recommendations"
+  hx-trigger="load delay:1500ms"
+  hx-swap="outerHTML"
+>
+  <div class="w-full">
+    <h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
+      {{range (seq 8)}}
+        <div class="flex flex-col gap-2">
+          <div class="skeleton aspect-2/3"></div>
+          <div class="skeleton h-3 w-full"></div>
+        </div>
+      {{end}}
+    </div>
+  </div>
+</div>
+{{end}}
+
 {{define "anime_statistics"}}
 {{if .Items}}
 <div class="flex flex-col gap-1.5 pt-2">
@@ -296,7 +316,7 @@
     </div>
   </div>
 
-  <div hx-get="/anime/{{$anime.MalID}}?section=characters" hx-trigger="revealed" hx-swap="outerHTML">
+  <div hx-get="/anime/{{$anime.MalID}}?section=characters" hx-trigger="load" hx-swap="outerHTML">
     <div class="mt-12 w-full">
       <h2 class="mb-6 text-lg font-normal text-foreground">Characters & Cast</h2>
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
@@ -314,7 +334,10 @@
   </div>
 
   <div class="w-full">
-    <div hx-get="/api/watch-order?animeId={{$anime.MalID}}" hx-trigger="revealed">
+    <div
+      hx-get="/api/watch-order?animeId={{$anime.MalID}}"
+      hx-trigger="load"
+    >
       <div class="mt-8 flex items-center gap-3 text-foreground-muted">
         <div class="size-5 animate-spin rounded-full border-2 border-t-transparent border-accent"></div>
         <span class="text-sm">Loading watch order sequence...</span>
@@ -322,7 +345,11 @@
     </div>
   </div>
 
-  <div hx-get="/anime/{{$anime.MalID}}?section=recommendations" hx-trigger="revealed" hx-swap="outerHTML">
+  <div
+    hx-get="/anime/{{$anime.MalID}}?section=recommendations"
+    hx-trigger="load"
+    hx-swap="outerHTML"
+  >
     <div class="w-full">
       <h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
       <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
diff --git a/templates/components/watch_order.gohtml b/templates/components/watch_order.gohtml
index 3141f0c..551f736 100644
--- a/templates/components/watch_order.gohtml
+++ b/templates/components/watch_order.gohtml
@@ -18,3 +18,15 @@
   </div>
 </div>
 {{end}}
+
+{{define "watch_order_loading"}}
+<div
+  hx-get="/api/watch-order?animeId={{.AnimeID}}"
+  hx-trigger="load delay:1500ms"
+>
+  <div class="mt-8 flex items-center gap-3 text-foreground-muted">
+    <div class="size-5 animate-spin rounded-full border-2 border-t-transparent border-accent"></div>
+    <span class="text-sm">Loading watch order sequence...</span>
+  </div>
+</div>
+{{end}}