Optimize font loading and add loading screen for web

TheGreatRambler · Dec 25, 2021 · 8c7d568 · 8c7d568
1 parent 7e4dd34
commit 8c7d568
Show file tree

Hide file tree

Showing 3 changed files with 660 additions and 10 deletions.
diff --git a/shell_minimal.html b/shell_minimal.html
@@ -30,10 +30,22 @@
 			image-rendering: pixelated;
 			-ms-interpolation-mode: nearest-neighbor;
 		}
+
+		#loading {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			text-align: center;
+			min-height: 100vh;
+			background-color: #805438;
+		}
 	</style>
 </head>
 
 <body>
+	<div id="loading">
+		<p>Loading...</p>
+	</div>
 	<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
 	<script type='text/javascript'>
 		var Module = {
@@ -59,7 +71,8 @@
 			},
 			monitorRunDependencies: function(left) {
 				// no run dependencies to log
-			}
+			},
+			showLoading: true
 		};
 		window.onerror = function() {
 			console.log("onerror: " + event);
@@ -73,6 +86,15 @@
 
 			return originalCanvasGetContext.call(this, contextType, contextAttributes);
 		};
+
+		var loadingElement = document.getElementById("loading");
+		setInterval(function() {
+			if (Module.showLoading) {
+				loadingElement.style.display = "flex";
+			} else {
+				loadingElement.style.display = "none";
+			}
+		}, 50);
 	</script>
 	<script src="FileSaver.min.js"></script>
 	{{{ SCRIPT }}}