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

perf: optimize page load with async HTMX fragments

Browse Source
This commit is contained in:
mkelvers
2026-05-05 16:05:51 +02:00
parent cb16d8e6c7
commit c50258c476
4 changed files with 142 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
templates/index.gohtml
View File

@@ -1,9 +1,8 @@
{{define "title"}}Home{{end}}
{{define "content"}}
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
<div class="flex flex-col gap-10">
{{if .ContinueWatching}}
{{template "continue_watching" .ContinueWatching}}
{{if .User}}
<div hx-get="/api/catalog/continue" hx-trigger="load" hx-swap="outerHTML"></div>
{{end}}
<section class="w-full">
@@ -14,11 +13,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
</a>
</div>
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
{{range .CurrentlyAiring}}
{{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
{{end}}
<div hx-get="/api/catalog/airing" hx-trigger="load" hx-swap="outerHTML">
{{template "catalog_skeleton"}}
</div>
</section>
@@ -30,12 +26,46 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
</a>
</div>
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
{{range .MostPopular}}
{{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
{{end}}
<div hx-get="/api/catalog/popular" hx-trigger="load" hx-swap="outerHTML">
{{template "catalog_skeleton"}}
</div>
</section>
</div>
{{end}}
<style>
.skeleton {
background: linear-gradient(90deg, #1f1f1f 25%, #2a2a2a 50%, #1f1f1f 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
{{end}}
{{define "catalog_section"}}
{{if eq .Section "Continue"}}
{{if .ContinueWatching}}
{{template "continue_watching" .ContinueWatching}}
{{end}}
{{else}}
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
{{range .Animes}}
{{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
{{end}}
</div>
{{end}}
{{end}}
{{define "catalog_skeleton"}}
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
{{range (seq 6)}}
<div class="flex flex-col gap-2">
<div class="skeleton aspect-[2/3] w-full rounded-xl"></div>
<div class="skeleton h-4 w-3/4 rounded"></div>
</div>
{{end}}
</div>
{{end}}