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

@@ -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>
 

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);
 				});
 			},

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);
 });