Added avatar loading

fade.scarlet

@@ -1,7 +0,0 @@
-.fade
-	opacity 1
-	transition opacity fade-speed ease
-	will-change opacity
-
-.fade-out
-	opacity 0

scripts/AnimeNotifier.ts

@@ -7,9 +7,41 @@ export class AnimeNotifier {
 		this.app = app
 	}
 
+	onReadyStateChange() {
+		if(document.readyState !== "interactive") {
+			return
+		}
+
+		this.run()
+	}
+
 	run() {
 		this.app.content = this.app.find("content")
 		this.app.loading = this.app.find("loading")
 		this.app.run()
 	}
+
+	onContentLoaded() {
+		this.updateAvatars()
+	}
+
+	updateAvatars() {
+		let images = document.querySelectorAll('.user-image')
+
+		for(let i = 0; i < images.length; ++i) {
+			let img = images[i] as HTMLImageElement
+
+			if(img.naturalWidth === 0) {
+				img.onload = function() {
+					this.classList.add("user-image-found")
+				}
+
+				img.onerror = function() {
+					this.classList.add("user-image-not-found")
+				}
+			} else {
+				img.classList.add("user-image-found")
+			}
+		}
+	}
 }

scripts/Application.ts

@@ -16,6 +16,12 @@ export class Application {
 		this.fadeOutClass = "fade-out"
 	}
 
+	run() {
+		this.ajaxify()
+		this.markActiveLinks()
+		this.loading.classList.add(this.fadeOutClass)
+	}
+
 	find(id: string): HTMLElement {
 		return document.getElementById(id)
 	}
@@ -48,14 +54,7 @@ export class Application {
 	
 		this.currentURL = url
 
-		// function sleep(ms) {
-		// 	return new Promise(resolve => setTimeout(resolve, ms))
-		// }
-
-		// sleep(500).then(() => {
-			
-		// })
-
+		// Start sending a network request
 		let request = this.get("/_" + url)
 
 		let onTransitionEnd = e => {
@@ -81,6 +80,9 @@ export class Application {
 				// Fade animations
 				this.content.classList.remove(this.fadeOutClass)
 				this.loading.classList.add(this.fadeOutClass)
+
+				// Send DOMContentLoaded Event
+				this.emit("DOMContentLoaded")
 			})
 		}
 
@@ -136,21 +138,15 @@ export class Application {
 				e.preventDefault()
 				e.stopPropagation()
 
-				if(!url || url === window.location.pathname)
+				if(!url || url === self.currentURL)
 					return
-
+				
 				// Load requested page
 				self.load(url, true)
 			}
 		}
 	}
 
-	run() {
-		this.ajaxify()
-		this.markActiveLinks()
-		this.loading.classList.add(this.fadeOutClass)
-	}
-
 	scrollToTop() {
 		let parent = this.content
 
@@ -158,4 +154,11 @@ export class Application {
 			parent.scrollTop = 0
 		}
 	}
+
+	emit(eventName: string) {
+		document.dispatchEvent(new Event(eventName, {
+			"bubbles": true,
+			"cancelable": true
+		}))
+	}
 }

scripts/main.ts

@@ -4,11 +4,8 @@ import { AnimeNotifier } from "./AnimeNotifier"
 let app = new Application()
 let arn = new AnimeNotifier(app)
 
-document.onreadystatechange = function() {
-	if(document.readyState === "interactive") {
-		arn.run()
-	}
-}
+document.addEventListener("DOMContentLoaded", arn.onContentLoaded.bind(arn))
+document.addEventListener("readystatechange", arn.onReadyStateChange.bind(arn))
 
 window.onpopstate = e => {
 	if(e.state)

styles/fade.scarlet

@@ -4,4 +4,4 @@
 	will-change opacity
 
 .fade-out
-	opacity 0
+	opacity 0 !important

styles/user.scarlet

@@ -7,4 +7,10 @@
 	opacity 0
 	default-transition
 	:hover
-		box-shadow outline-shadow-heavy
+		box-shadow outline-shadow-heavy
+
+.user-image-found
+	opacity 1 !important
+
+.user-image-not-found
+	opacity 0 !important