UI: Display "Loading messages" instead of "No results" while loading results

server/ui-src/components/ListMessages.vue

@@ -8,6 +8,10 @@ export default {
 		CommonMixins
 	],
 
+	props: {
+		loadingMessages: Number, // use different name to `loading` as that is already in use in CommonMixins
+	},
+
 	data() {
 		return {
 			mailbox,
@@ -153,13 +157,15 @@ export default {
 				<div class="d-none d-lg-block col-2 col-xxl-1 small text-end text-muted">
 					{{ getRelativeCreated(message) }}
 				</div>
-				<!-- </a> -->
 			</RouterLink>
 		</div>
 	</template>
 	<template v-else>
 		<p class="text-center mt-5">
-			<template v-if="getSearch()">No results for <code>{{ getSearch() }}</code></template>
+			<span v-if="loadingMessages > 0" class="text-secondary">
+				Loading messages...
+			</span>
+			<template v-else-if="getSearch()">No results for <code>{{ getSearch() }}</code></template>
 			<template v-else>No messages in your mailbox</template>
 		</p>
 	</template>

server/ui-src/views/MailboxView.vue

@@ -83,7 +83,7 @@ export default {
 
 		<div class="col-xl-10 col-md-9 mh-100 ps-0 ps-md-2 pe-0">
 			<div class="mh-100" style="overflow-y: auto;" id="message-page">
-				<ListMessages />
+				<ListMessages :loading-messages="loading" />
 			</div>
 		</div>
 	</div>

server/ui-src/views/SearchView.vue

@@ -111,7 +111,7 @@ export default {
 
 		<div class="col-lg-10 col-md-9 mh-100 ps-0 ps-md-2 pe-0">
 			<div class="mh-100" style="overflow-y: auto;" id="message-page">
-				<ListMessages />
+				<ListMessages :loading-messages="loading" />
 			</div>
 		</div>
 	</div>