From 715f23460f29e587acd4fd153a50fe9ceeb92740 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 27 Apr 2021 16:38:52 +0200
Subject: [PATCH] Catch canceled requests and show better loading indication
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/search/GlobalSearchResults.vue | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/search/GlobalSearchResults.vue b/src/components/search/GlobalSearchResults.vue
index b8de8d5c1..03ae4a962 100644
--- a/src/components/search/GlobalSearchResults.vue
+++ b/src/components/search/GlobalSearchResults.vue
@@ -22,7 +22,10 @@
 
 <template>
 	<div v-if="searchQuery!==''" class="global-search">
-		<h2><RichText :text="t('deck', 'Search for {searchQuery} in all boards')" :arguments="queryStringArgs" /></h2>
+		<h2>
+			<RichText :text="t('deck', 'Search for {searchQuery} in all boards')" :arguments="queryStringArgs" />
+			<div v-if="loading" class="icon-loading-small" />
+		</h2>
 		<Actions>
 			<ActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
 		</Actions>
@@ -107,23 +110,38 @@ export default {
 		},
 	},
 	watch: {
-		searchQuery() {
+		async searchQuery() {
 			this.cursor = null
 			this.loading = true
-			this.search()
+			try {
+				await this.search()
+				this.loading = false
+			} catch (e) {
+				if (!axios.isCancel(e)) {
+					console.error('Search request failed', e)
+					this.loading = false
+				}
+			}
 		},
 	},
 	methods: {
-		infiniteHandler($state) {
+		async infiniteHandler($state) {
 			this.loading = true
-			this.search().then((data) => {
+			try {
+				const data = await this.search()
 				if (data.length) {
 					$state.loaded()
 				} else {
 					$state.complete()
 				}
 				this.loading = false
-			})
+			} catch (e) {
+				if (!axios.isCancel(e)) {
+					console.error('Search request failed', e)
+					$state.complete()
+					this.loading = false
+				}
+			}
 		},
 		async search() {
 			if (this.cancel) {
@@ -177,6 +195,13 @@ export default {
 		padding: 10px;
 	}
 
+	h2 > div {
+		display: inline-block;
+
+		&.icon-loading-small {
+			margin-right: 20px;
+		}
+	}
 	h2::v-deep span {
 		background-color: var(--color-background-dark);
 		padding: 3px;