From 42a1fe15105df140ac6fccdcb1deb30f3d3d1ed0 Mon Sep 17 00:00:00 2001
From: Ralph Slooten <axllent@gmail.com>
Date: Tue, 26 Sep 2023 16:51:30 +1300
Subject: [PATCH] UI: Display "Loading messages" instead of "No results" while
 loading results

---
 server/ui-src/components/ListMessages.vue | 10 ++++++++--
 server/ui-src/views/MailboxView.vue       |  2 +-
 server/ui-src/views/SearchView.vue        |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/server/ui-src/components/ListMessages.vue b/server/ui-src/components/ListMessages.vue
index 5d26f04..1d8c8e1 100644
--- a/server/ui-src/components/ListMessages.vue
+++ b/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>
diff --git a/server/ui-src/views/MailboxView.vue b/server/ui-src/views/MailboxView.vue
index de1e503..f9a94ef 100644
--- a/server/ui-src/views/MailboxView.vue
+++ b/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>
diff --git a/server/ui-src/views/SearchView.vue b/server/ui-src/views/SearchView.vue
index a431c5b..b86e5bc 100644
--- a/server/ui-src/views/SearchView.vue
+++ b/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>