melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add loading fragment templates and optimize section triggers

Browse Source
This commit is contained in:
mkelvers
2026-06-04 11:28:34 +02:00
parent 390f6386af
commit ede479c3e1
2 changed files with 42 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
templates/anime.gohtml
View File

@@ -38,6 +38,26 @@
{{end}} {{end}}
{{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"}} {{define "anime_statistics"}}
{{if .Items}} {{if .Items}}
<div class="flex flex-col gap-1.5 pt-2"> <div class="flex flex-col gap-1.5 pt-2">
@@ -296,7 +316,7 @@
</div> </div>
</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"> <div class="mt-12 w-full">
<h2 class="mb-6 text-lg font-normal text-foreground">Characters & Cast</h2> <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"> <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>
<div class="w-full"> <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="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> <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> <span class="text-sm">Loading watch order sequence...</span>
@@ -322,7 +345,11 @@
</div> </div>
</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"> <div class="w-full">
<h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2> <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"> <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">

12
templates/components/watch_order.gohtml
View File

@@ -18,3 +18,15 @@
</div> </div>
</div> </div>
{{end}} {{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}}