Removed flickering on iframes

main.go

@@ -98,6 +98,7 @@ func configure(app *aero.Application) *aero.Application {
 
 	// Soundtracks
 	app.Ajax("/soundtracks", soundtracks.Get)
+	app.Ajax("/soundtracks/from/:index", soundtracks.From)
 	app.Ajax("/new/soundtrack", newsoundtrack.Get)
 	app.Ajax("/soundtrack/:id", soundtrack.Get)
 	app.Ajax("/soundtrack/:id/edit", soundtrack.Edit)

mixins/LoadMore.pixy

@@ -0,0 +1,4 @@
+component LoadMore
+	button.action(data-action="loadMore", data-trigger="click")
+		Icon("refresh")
+		span Load more

pages/forum/forum.pixy

@@ -9,9 +9,7 @@ component Forum(tag string, threads []*arn.Thread, threadsPerPage int)
 			Icon("plus")
 			span New thread
 		if len(threads) == threadsPerPage
-			button
-				Icon("refresh")
-				span Load more
+			LoadMore
 
 component ThreadList(threads []*arn.Thread)
 	if len(threads) == 0

pages/soundtracks/soundtracks.go

@@ -2,6 +2,7 @@ package soundtracks
 
 import (
 	"net/http"
+	"strconv"
 
 	"github.com/aerogo/aero"
 	"github.com/animenotifier/arn"
@@ -31,3 +32,35 @@ func Get(ctx *aero.Context) string {
 
 	return ctx.HTML(components.SoundTracks(tracks, user))
 }
+
+// From renders the soundtracks from the given index.
+func From(ctx *aero.Context) string {
+	user := utils.GetUser(ctx)
+	index, err := ctx.GetInt("index")
+
+	if err != nil {
+		return ctx.Error(http.StatusBadRequest, "Invalid start index", err)
+	}
+
+	tracks, err := arn.FilterSoundTracks(func(track *arn.SoundTrack) bool {
+		return !track.IsDraft && len(track.Media) > 0
+	})
+
+	if err != nil {
+		return ctx.Error(http.StatusInternalServerError, "Error fetching soundtracks", err)
+	}
+
+	if index < 0 || index >= len(tracks) {
+		return ctx.Error(http.StatusBadRequest, "Invalid start index (maximum is "+strconv.Itoa(len(tracks))+")", nil)
+	}
+
+	arn.SortSoundTracksLatestFirst(tracks)
+
+	tracks = tracks[index:]
+
+	if len(tracks) > maxTracks {
+		tracks = tracks[:maxTracks]
+	}
+
+	return ctx.HTML(components.SoundTracksScrollable(tracks, user))
+}

pages/soundtracks/soundtracks.pixy

@@ -12,6 +12,12 @@ component SoundTracks(tracks []*arn.SoundTrack, user *arn.User)
 					Icon("pencil")
 					span Edit draft
 
-	.sound-tracks
-		each track in tracks
-			SoundTrack(track)
+	#load-more-target.sound-tracks
+		SoundTracksScrollable(tracks, user)
+	
+	//- .buttons
+	//- 	LoadMore
+
+component SoundTracksScrollable(tracks []*arn.SoundTrack, user *arn.User)
+	each track in tracks
+		SoundTrack(track)

scripts/Actions.ts

@@ -369,6 +369,20 @@ export function arrayRemove(arn: AnimeNotifier, element: HTMLElement) {
 	.catch(err => arn.statusMessage.showError(err))
 }
 
+// Load more
+export function loadMore(arn: AnimeNotifier, element: HTMLElement) {
+	let target = arn.app.find("load-more-target")
+	let index = "9"
+	
+	fetch("/_" + arn.app.currentPath + "/from/" + index)
+	.then(response => response.text())
+	.then(body => {
+		target.innerHTML += body
+		arn.app.emit("DOMContentLoaded")
+	})
+	.catch(err => arn.statusMessage.showError(err))
+}
+
 // Chrome extension installation
 export function installExtension(arn: AnimeNotifier, button: HTMLElement) {
 	let browser: any = window["chrome"]

scripts/AnimeNotifier.ts

@@ -549,7 +549,7 @@ export class AnimeNotifier {
 		// Once the iframe becomes visible, load it
 		element["became visible"] = () => {
 			// If the source is already set correctly, don't set it again to avoid iframe flickering.
-			if(element.src !== element.dataset.src) {
+			if(element.src !== element.dataset.src && element.src !== (window.location.protocol + element.dataset.src)) {
 				element.src = element.dataset.src
 			}
 

scripts/Diff.ts

@@ -91,12 +91,12 @@ export class Diff {
 						continue
 					}
 
-					if(attrib.name === "class") {
-						// If the class is exactly the same, skip this attribute.
-						if(elemA.getAttribute("class") === attrib.value) {
-							continue
-						}
+					// If the attribute value is exactly the same, skip this attribute.
+					if(elemA.getAttribute(attrib.name) === attrib.value) {
+						continue
+					}
 
+					if(attrib.name === "class") {
 						let classesA = elemA.classList
 						let classesB = elemB.classList
 						let removeClasses: string[] = []
@@ -120,7 +120,7 @@ export class Diff {
 						continue
 					}
 					
-					elemA.setAttribute(attrib.name, elemB.getAttribute(attrib.name))
+					elemA.setAttribute(attrib.name, attrib.value)
 				}
 
 				// Special case: Apply state of input elements