Feature: New loading indicator, reduce flash during message transitions (#682)

server/ui-src/assets/styles.scss

@@ -75,16 +75,34 @@
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background: rgba(255, 255, 255, 0.4);
 	z-index: 1500;
+	cursor: wait;
+
+	.loader-bar {
+		width: 35%;
+		height: 2px;
+		background: $success;
+		border-radius: 0 999px 999px 0;
+		animation: loader-slide 1.2s ease-in-out 200ms infinite backwards;
+	}
+}
+
+@keyframes loader-slide {
+	0% {
+		transform: translateX(-100%);
+	}
+
+	50% {
+		transform: translateX(110vw);
+	}
+
+	100% {
+		transform: translateX(110vw);
+	}
 }
 
 // dark mode adjustments
 @include color-mode(dark) {
-	.loader {
-		background: rgba(0, 0, 0, 0.4);
-	}
-
 	.token.tag,
 	.token.property {
 		color: #ee6969;

server/ui-src/components/AjaxLoader.vue

@@ -10,11 +10,7 @@ export default {
 </script>
 
 <template>
-	<div v-if="loading > 0" class="loader">
-		<div class="d-flex justify-content-center align-items-center h-100">
-			<div class="spinner-border text-muted" role="status">
-				<span class="visually-hidden">Loading...</span>
-			</div>
-		</div>
+	<div v-if="loading > 0" class="loader" role="status" aria-live="polite" aria-label="Loading">
+		<div class="loader-bar"></div>
 	</div>
 </template>

server/ui-src/views/MessageView.vue

@@ -134,7 +134,6 @@ export default {
 
 	methods: {
 		loadMessage() {
-			this.message = false;
 			const uri = this.resolve("/api/v1/message/" + this.$route.params.id);
 			this.get(
 				uri,
@@ -605,8 +604,13 @@ export default {
 			>
 				<i class="bi bi-caret-left-fill"></i>
 			</RouterLink>
-			<RouterLink :to="'/view/' + nextID" class="btn btn-outline-light" :class="nextID ? '' : 'disabled'">
-				<i class="bi bi-caret-right-fill" title="View next message"></i>
+			<RouterLink
+				:to="'/view/' + nextID"
+				class="btn btn-outline-light"
+				:class="nextID ? '' : 'disabled'"
+				title="View next message"
+			>
+				<i class="bi bi-caret-right-fill"></i>
 			</RouterLink>
 		</div>
 	</div>