Improved anime list rendering

pages/animelist/animelist.pixy

@@ -49,8 +49,8 @@ component AnimeList(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User
 				if user != nil
 					th.anime-list-item-actions Actions
 		tbody
-			each item in animeList.Items
-				tr.anime-list-item.mountable(title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/update/" + item.AnimeID)
+			for i, item := range animeList.Items
+				tr(class=utils.ItemCSSClass(animeList, i), title=item.Notes, data-api="/api/animelist/" + animeList.UserID + "/update/" + item.AnimeID)
 					td.anime-list-item-name
 						a.ajax(href=item.Link(animeList.User().Nick))= item.Anime().Title.Canonical
 					td.anime-list-item-airing-date

scripts/AnimeNotifier.ts

@@ -223,8 +223,10 @@ export class AnimeNotifier {
 		const maxDelay = 1000
 		
 		let time = 0
+		let collection = document.getElementsByClassName(className)
 
-		for(let element of findAll(className)) {
+		for(let i = 0; i < collection.length; i++) {
+			let element = collection.item(i) as HTMLElement
 			let type = element.dataset.mountableType || "general"
 
 			if(type in mountableTypes) {

utils/ItemCSSClass.go

@@ -0,0 +1,14 @@
+package utils
+
+import (
+	"github.com/animenotifier/arn"
+)
+
+// ItemCSSClass removes mountable class if the list has too many items.
+func ItemCSSClass(list *arn.AnimeList, index int) string {
+	if index > 20 || len(list.Items) > 50 {
+		return "anime-list-item"
+	}
+
+	return "anime-list-item mountable"
+}