Slightly improved diff performance

pages/animelist/animelist.scarlet

@@ -1,5 +1,4 @@
 .anime-list-container
-	vertical
 	width 100%
 	max-width 800px
 	margin 0 auto

scripts/Actions/Diff.ts

@@ -11,6 +11,9 @@ export function diff(arn: AnimeNotifier, element: HTMLElement) {
 	let url = element.dataset.url || (element as HTMLAnchorElement).getAttribute("href")
 
 	arn.diff(url)
-	.then(() => arn.scrollTo(element))
+	.then(() => {
+		// Avoid instant layout thrashing
+		arn.requestIdleCallback(() => arn.scrollTo(element))
+	})
 	.catch(console.error)
 }

scripts/AnimeNotifier.ts

@@ -294,6 +294,10 @@ export class AnimeNotifier {
 	}
 
 	countUp() {
+		if(!this.app.currentPath.includes("/paypal/success")) {
+			return
+		}
+
 		for(let element of findAll("count-up")) {
 			let final = parseInt(element.innerText)
 			let duration = 2000.0
@@ -384,9 +388,7 @@ export class AnimeNotifier {
 			return Promise.resolve(response)
 		})
 		.then(response => response.text())
-		.then(html => {
+		.then(html => Diff.root(document.documentElement, html))
-			Diff.root(document.documentElement, html)
-		})
 		.then(() => this.app.emit("DOMContentLoaded"))
 		.then(() => this.loading(false)) // Because our loading element gets reset due to full page diff
 	}
@@ -605,9 +607,7 @@ export class AnimeNotifier {
 		let request = fetch(path, {
 			credentials: "same-origin"
 		})
-		.then(response => {
+		.then(response => response.text())
-			return response.text()
-		})
 
 		history.pushState(url, null, url)
 		this.app.currentPath = url
@@ -617,7 +617,7 @@ export class AnimeNotifier {
 
 		// Delay by transition-speed
 		return delay(200).then(() => request)
-		.then(html => this.app.setContent(html, true))
+		.then(html => Diff.innerHTML(this.app.content, html))
 		.then(() => this.app.emit("DOMContentLoaded"))
 		.then(() => this.loading(false))
 		.catch(console.error)
@@ -664,9 +664,11 @@ export class AnimeNotifier {
 		const contentPadding = 24
 
 		let scrollHandle: number
-		let oldScroll = this.app.content.parentElement.scrollTop
 		let newScroll = 0
 		let finalScroll = Math.max(target.offsetTop - contentPadding, 0)
+
+		// Calculating scrollTop will force a layout - careful!
+		let oldScroll = this.app.content.parentElement.scrollTop
 		let scrollDistance = finalScroll - oldScroll
 
 		if(scrollDistance > 0 && scrollDistance < 4) {

scripts/Application.ts

@@ -92,7 +92,7 @@ export class Application {
 			// Wait for the network request to end.
 			request.then(html => {
 				// Set content
-				this.setContent(html, false)
+				this.setContent(html)
 				this.scrollToTop()
 
 				// Fade animations
@@ -113,19 +113,15 @@ export class Application {
 		return request
 	}
 
-	setContent(html: string, diff: boolean) {
+	setContent(html: string) {
-		if(diff) {
+		this.content.innerHTML = html
-			Diff.innerHTML(this.content, html)
-		} else {
-			this.content.innerHTML = html
-		}
 	}
 
 	markActiveLinks(element?: HTMLElement) {
 		if(element === undefined)
 			element = document.body
 
-		let links = element.querySelectorAll("a")
+		let links = element.getElementsByTagName("a")
 
 		for(let i = 0; i < links.length; i++) {
 			let link = links[i]

scripts/Diff.ts

@@ -7,23 +7,35 @@ export class Diff {
 	static rootContainer: HTMLElement
 
 	// innerHTML will diff the element with the given HTML string and apply DOM mutations.
-	static innerHTML(aRoot: HTMLElement, html: string) {
+	static innerHTML(aRoot: HTMLElement, html: string): Promise<void> {
 		if(!Diff.container) {
 			Diff.container = document.createElement("main")
 		}
 
 		Diff.container.innerHTML = html
-		Diff.childNodes(aRoot, Diff.container)
+
+		return new Promise((resolve, reject) => {
+			window.requestAnimationFrame(() => {
+				Diff.childNodes(aRoot, Diff.container)
+				resolve()
+			})
+		})
 	}
 
 	// root will diff the document root element with the given HTML string and apply DOM mutations.
 	static root(aRoot: HTMLElement, html: string) {
-		if(!Diff.rootContainer) {
+		return new Promise((resolve, reject) => {
-			Diff.rootContainer = document.createElement("html")
+			if(!Diff.rootContainer) {
-		}
+				Diff.rootContainer = document.createElement("html")
+			}
 
-		Diff.rootContainer.innerHTML = html.replace("<!DOCTYPE html>", "")
+			Diff.rootContainer.innerHTML = html.replace("<!DOCTYPE html>", "")
-		Diff.childNodes(aRoot.getElementsByTagName("body")[0], Diff.rootContainer.getElementsByTagName("body")[0])
+
+			window.requestAnimationFrame(() => {
+				Diff.childNodes(aRoot.getElementsByTagName("body")[0], Diff.rootContainer.getElementsByTagName("body")[0])
+				resolve()
+			})
+		})
 	}
 
 	// childNodes diffs the child nodes of 2 given elements and applies DOM mutations.