From 904fee390b63ad6f598259a4e2fa818d853a4ce0 Mon Sep 17 00:00:00 2001
From: Hans5958 <hans5958@outlook.com>
Date: Tue, 12 Apr 2022 19:18:53 +0700
Subject: [PATCH] Improve canvas loading

A
---
 web/_css/style.css | 41 +++++++++++++++++++++++++++++++++++------
 web/_js/main.js    |  4 ++--
 web/_js/time.js    | 23 +++++++++++++++++++++--
 3 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/web/_css/style.css b/web/_css/style.css
index a2f2d976..b8f93693 100644
--- a/web/_css/style.css
+++ b/web/_css/style.css
@@ -125,7 +125,7 @@ header {
 	background-color: #555;
 	border-right: 1px #000 solid;
 	border-bottom: 1px #000 solid;
-	z-index: 2000;
+	z-index: 2100;
 	display: inline-block;
 }
 
@@ -250,7 +250,16 @@ #loading {
 	left: 0;
 	right: 0;
 	bottom: 0;
+	z-index: 2000;
+}
+
+[data-init-done][data-canvas-loading='false'] #loading {
+	display: none
+}
+
+[data-init-done] #loading {
 	z-index: 1000;
+	animation: fadeInOut 4s linear 0s 1;
 }
 
 #loading > div {
@@ -274,10 +283,25 @@ #loading > div > div:first-child {
 }
 
 #loading > div > span {
-	font-family: "DejaVu Sans", Helvetica, sans-serif;
+	font-family: dejavu, Helvetica, sans-serif;
 	font-weight: 200;
 }
 
+@keyframes fadeInOut {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 0;
+    }
+    52.5% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
 @keyframes spinner {
 	from {
 		transform: rotateZ(0deg);
@@ -609,7 +633,7 @@ .overlay {
 	background-color: rgba(0, 0, 0, .8);
 	display: none;
 	justify-content: center;
-	z-index: 1000;
+	z-index: 2000;
 }
 
 #exportWindow {
@@ -657,7 +681,7 @@ #coordsWrapper {
 	position: absolute;
     display: flex;
 	gap: 10px;
-	z-index: 100;
+	z-index: 1100;
 	top: 5px;
 	left: 364px;
 }
@@ -764,6 +788,11 @@ #timeControls:hover #timeControlsTooltip {
 	display: flex;
 }
 
+#zoomControls,
+#timeControls {
+	z-index: 1100;
+}
+
 .slider::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	appearance: none;
@@ -786,7 +815,7 @@ #author {
 	border: 1px #000 solid;
 	padding: 3px;
 	font-size: 12px;
-	z-index: 1100;
+	z-index: 2100;
 	min-width: 320px;
 	text-align: center;
 	display: flex;
@@ -1141,7 +1170,7 @@ #donateButton {
 
 #donateWindow {
 	display: inline-block;
-	z-index: 2000;
+	z-index: 2100;
 	max-width: 400px;
 	background-color: #444;
 	border: 1px #000 solid;
diff --git a/web/_js/main.js b/web/_js/main.js
index 92acbcc7..43dad34e 100644
--- a/web/_js/main.js
+++ b/web/_js/main.js
@@ -186,8 +186,6 @@ async function init(){
 		initView();
 	}
 	
-	document.getElementById("loading").style.display = "none";
-
 	document.getElementById("zoomInButton").addEventListener("click", function(e){
 
 		/*if(zoomAnimationFrame){
@@ -496,4 +494,6 @@ async function init(){
 		applyView();
 	});
 	
+	document.body.dataset.initDone = ''
+
 }
diff --git a/web/_js/time.js b/web/_js/time.js
index 76e23a42..e13288bd 100644
--- a/web/_js/time.js
+++ b/web/_js/time.js
@@ -96,6 +96,10 @@ const timeConfig = [
 let slider = document.getElementById("timeControlsSlider");
 let tooltip = document.getElementById("timeControlsTooltip")
 let image = document.getElementById("image");
+let abortController = new AbortController()
+let currentUpdateIndex = 0
+let loadingTimeout = setInterval(null, 0)
+let updateTimeout = setInterval(null, 0)
 
 let timeCallback = (a) => {};
 let atlasBackup = [];
@@ -106,14 +110,28 @@ slider.value = timeConfig.length;
 updateTime(slider.value)
 
 slider.addEventListener("input", (event) => {
-    updateTime(parseInt(event.target.value))
+    clearTimeout(updateTimeout)
+    updateTimeout = setInterval(() => {
+        updateTime(parseInt(event.target.value))
+    }, 100)
 })
 
 async function updateTime(index) {
+    document.body.dataset.canvasLoading = true
+    abortController.abort()
+    abortController = new AbortController()
+    currentUpdateIndex++
+    let myUpdateIndex = currentUpdateIndex
     let configObject = timeConfig[index-1];
     if (!configObject.image) {
         console.log("fetching");
-        let fetchResult = await fetch(configObject.url);
+        let fetchResult = await fetch(configObject.url, {
+            signal: abortController.signal
+        });
+        if (currentUpdateIndex !== myUpdateIndex) {
+            hideLoading()
+            return
+        }
         let imageBlob = await fetchResult.blob();
         configObject.image = URL.createObjectURL(imageBlob);
     }
@@ -128,6 +146,7 @@ async function updateTime(index) {
     if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString()
     else tooltip.querySelector('p').textContent = configObject.timestamp
     tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
+    document.body.dataset.canvasLoading = false
 }
 
 tooltip.parentElement.addEventListener('mouseenter', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"