From 0ec3ae174aef25befb5572efeb94388f9be439df Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sat, 24 Mar 2018 17:14:26 +0100
Subject: [PATCH] Fixed flickering and improved performance

---
 scripts/AnimeNotifier.ts |  1 +
 scripts/Application.ts   | 38 ++++++++++++++++++++------------------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts
index acca6e1a..105eb352 100644
--- a/scripts/AnimeNotifier.ts
+++ b/scripts/AnimeNotifier.ts
@@ -44,6 +44,7 @@ export class AnimeNotifier {
 		// These classes will never be removed on DOM diffs
 		Diff.persistentClasses.add("mounted")
 		Diff.persistentClasses.add("element-found")
+		Diff.persistentClasses.add("active")
 
 		// Never remove src property on diffs
 		Diff.persistentAttributes.add("src")
diff --git a/scripts/Application.ts b/scripts/Application.ts
index 8b78d239..52698bbc 100644
--- a/scripts/Application.ts
+++ b/scripts/Application.ts
@@ -23,8 +23,10 @@ export class Application {
 
 	init() {
 		document.addEventListener("DOMContentLoaded", () => {
-			this.ajaxify()
-			this.markActiveLinks()
+			let links = document.getElementsByTagName("a")
+
+			this.markActiveLinks(links)
+			this.ajaxify(links)
 		})
 	}
 
@@ -82,6 +84,9 @@ export class Application {
 			history.pushState(url, "", url)
 		}
 
+		// Mark active links
+		this.markActiveLinks()
+
 		let onTransitionEnd = (e: Event) => {
 			// Ignore transitions of child elements.
 			// We only care about the transition event on the content element.
@@ -116,7 +121,6 @@ export class Application {
 
 		this.content.classList.add(this.fadeOutClass)
 		this.loading.classList.remove(this.fadeOutClass)
-		this.markActiveLinks()
 
 		return request
 	}
@@ -125,31 +129,29 @@ export class Application {
 		this.content.innerHTML = html
 	}
 
-	markActiveLinks(element?: HTMLElement) {
-		if(!element) {
-			element = document.body
+	markActiveLinks(links?: NodeListOf<HTMLAnchorElement>) {
+		if(!links) {
+			links = document.getElementsByTagName("a")
 		}
 
-		let links = element.getElementsByTagName("a")
-
 		for(let i = 0; i < links.length; i++) {
 			let link = links[i]
-			let href = link.getAttribute("href")
 
-			if(href === this.currentPath)
-				link.classList.add(this.activeLinkClass)
-			else
-				link.classList.remove(this.activeLinkClass)
+			Diff.mutations.queue(() => {
+				if(link.getAttribute("href") === this.currentPath) {
+					link.classList.add(this.activeLinkClass)
+				} else {
+					link.classList.remove(this.activeLinkClass)
+				}
+			})
 		}
 	}
 
-	ajaxify(element?: HTMLElement) {
-		if(!element) {
-			element = document.body
+	ajaxify(links?: NodeListOf<HTMLAnchorElement>) {
+		if(!links) {
+			links = document.getElementsByTagName("a")
 		}
 
-		let links = element.getElementsByTagName("a")
-
 		for(let i = 0; i < links.length; i++) {
 			let link = links[i] as HTMLAnchorElement