From 8f0b1a5476e7b9d1e02029d185d8b324dc7e8d19 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Tue, 18 May 2021 17:19:20 +0100
Subject: [PATCH] Refactor splash screen error handling

- Improve styling
- Add all error text dynamically to avoid showing on search results
- Reduce number of elements
- Show configuration errors
---
 index.html  | 15 +++++++--------
 src/App.vue |  2 +-
 src/main.ts | 12 +++++++-----
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 9cb2796..aa9ab22 100644
--- a/index.html
+++ b/index.html
@@ -218,18 +218,18 @@
 
         #splash__error-message {
             font-family: monospace;
+            background-color: var(--background-error);
+            padding: 1rem 1.5rem;
+            border-radius: var(--border-radius);
+            margin-bottom: 1rem;
         }
 
         #splash__error[aria-hidden=true] {
             opacity: 0;
         }
 
-        #splash__error-attempt:not(:empty):before {
-            content:' (';
-        }
-
-        #splash__error-attempt:not(:empty):after {
-            content:')';
+        #app {
+            height: 100%;
         }
     </style>
   </head>
@@ -264,9 +264,8 @@
         </svg>
 
         <div id="splash__error" role="alert" aria-hidden="true">
-            <span>Failed to load server configuration.</span>
             <span id="splash__error-message"></span>
-            <span id="splash__error-retry">Retrying<span id="splash__error-attempt"></span>...</span>
+            <span id="splash__error-retry"></span>
         </div>
     </div>
 
diff --git a/src/App.vue b/src/App.vue
index 29a0345..1724553 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -57,7 +57,7 @@ export default defineComponent({
 					requestAnimationFrame(() => window.hideSplash());
 				}).catch(e => {
 					console.error('Failed to load server configuration: ', e);
-					window.showSplashError(e, false, ++configAttempts.value);
+					window.showSplashError('Failed to load server configuration\n' + e, false, ++configAttempts.value);
 					setTimeout(() => loadConfiguration(), 1000);
 				});
 			},
diff --git a/src/main.ts b/src/main.ts
index 0527253..9926929 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -29,7 +29,6 @@ const splash = document.getElementById('splash'),
 	splashError = document.getElementById('splash__error'),
 	splashErrorMessage = document.getElementById('splash__error-message'),
 	splashRetry = document.getElementById('splash__error-retry'),
-	splashAttempt = document.getElementById('splash__error-attempt'),
 	svgs = import.meta.globEager('/assets/icons/*.svg');
 
 window.showSplash = function() {
@@ -74,12 +73,12 @@ window.showSplashError = function(message: string, fatal: boolean, attempts: num
 		splashSpinner.style.visibility = 'hidden';
 	}
 
-	if(splashAttempt && splashRetry) {
+	if(splashRetry) {
 		if(fatal) {
-			splashAttempt.hidden = splashRetry.hidden = true;
+			splashRetry.hidden = true;
 		} else if(attempts) {
-			splashAttempt.hidden = splashRetry.hidden = false;
-			splashAttempt.textContent = attempts.toString();
+			splashRetry.hidden = false;
+			splashRetry.textContent = `Retrying... (${attempts.toString()})`;
 		}
 	}
 };
@@ -107,4 +106,7 @@ API.validateConfiguration().then((config) => {
 
 	// app.config.performance = true;
 	app.mount('#app');
+}).catch(e => {
+	console.error('LiveAtlas configuration is invalid: ', e);
+	window.showSplashError('LiveAtlas configuration is invalid\n' + e, true);
 });