fix: resolve infinite scroll duplication issues

This commit is contained in:
2026-04-07 14:13:13 +02:00
parent f77788588e
commit 8bb5bc0a18
7 changed files with 267 additions and 183 deletions

View File

@@ -39,15 +39,28 @@ templ Discover() {
}
templ DiscoverItems(animes []jikan.Anime, listType string, nextPage int, hasNext bool) {
for i, anime := range animes {
if i == len(animes)-1 && hasNext {
<div class="catalog-item" hx-get={ string(templ.URL(fmt.Sprintf("/api/discover/%s?page=%d", listType, nextPage))) } hx-trigger="revealed" hx-swap="afterend">
@CatalogItem(anime)
</div>
} else {
<div class="catalog-item">
@CatalogItem(anime)
</div>
}
for _, anime := range animes {
<div class="catalog-item" data-id={ fmt.Sprintf("%d", anime.MalID) }>
@CatalogItem(anime)
</div>
}
if hasNext {
<div class="scroll-trigger" style="grid-column: 1 / -1; height: 20px;" hx-get={ string(templ.URL(fmt.Sprintf("/api/discover/%s?page=%d", listType, nextPage))) } hx-trigger="revealed" hx-swap="outerHTML"></div>
}
<script>
(function() {
const items = document.querySelectorAll('#discover-content .catalog-item[data-id]');
const seen = new Set();
items.forEach(item => {
const id = item.getAttribute('data-id');
if (id) {
if (seen.has(id)) {
item.remove();
} else {
seen.add(id);
}
}
});
})();
</script>
}