From 8742b4127c0b3be1ab9e71ebb4fed29cd471fa9a Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Wed, 8 Jun 2022 13:36:19 +0200
Subject: [PATCH] Improve pre-loaded feedback of website

Render the web interface as early as possible with a black background
and show a message to indicate whether the interface is actually loading
or if an error occured loading the main bundle.
---
 packages/master/web/index.html | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/master/web/index.html b/packages/master/web/index.html
index 71682ed7..7865557c 100644
--- a/packages/master/web/index.html
+++ b/packages/master/web/index.html
@@ -5,14 +5,34 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#2a2a2a" />
 		<title>Clusterio</title>
+		<style>
+			html {
+				color: #fff;
+				background-color: #000;
+			}
+
+			#bootstrap-msg {
+				font: 20px serif;
+				color: #aaa;
+				margin: auto;
+				margin-top: 1em;
+				width: fit-content;
+			}
+		</style>
 		<script>
-				window.webRoot = new URL("__WEB_ROOT__", document.location).pathname;
-				window.staticRoot = new URL("__STATIC_ROOT__", document.location).pathname;
+			window.webRoot = new URL("__WEB_ROOT__", document.location).pathname;
+			window.staticRoot = new URL("__STATIC_ROOT__", document.location).pathname;
+			function scriptError() {
+				let bootstrapMsg = document.getElementById("bootstrap-msg");
+				bootstrapMsg.textContent = "Error loading main bundle, see web console for details.";
+			}
 		</script>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
-		<div id="root"></div>
-		<script src="__STATIC_ROOT____MAIN_BUNDLE__"></script>
+		<div id="root">
+			<div id="bootstrap-msg">Loading web interface...</div>
+		</div>
+		<script src="__STATIC_ROOT____MAIN_BUNDLE__" defer onerror="scriptError()"></script>
 	</body>
 </html>