Add a cache for IMAP message in the database

Co-authored-by: Roeland Jago Douma <roeland@famdouma.nl>
Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>

5 files changed, 40 insertions, 14 deletions

diff --git a/src/components/FolderContent.vue b/src/components/FolderContent.vue
index 0237d26a9..78a5abdb3 100644
--- a/src/components/FolderContent.vue
+++ b/src/components/FolderContent.vue
@@ -2,7 +2,11 @@
 	<AppContent>
 		<AppDetailsToggle v-if="showMessage" @close="hideMessage" />
 		<div id="app-content-wrapper">
-			<Loading v-if="loading" :hint="t('mail', 'Loading messages')" />
+			<Loading
+				v-if="loading"
+				:hint="t('mail', 'Loading messages')"
+				:slow-hint="t('mail', 'This can take a bit longer when the mailbox is accessed for the first time.')"
+			/>
 			<template v-else>
 				<EnvelopeList
 					:account="account"
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index 4547301f3..ffa747352 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -2,6 +2,9 @@
 	<div v-if="hint" class="emptycontent">
 		<a class="icon-loading"></a>
 		<h2>{{ hint }}</h2>
+		<transition name="fade">
+			<em v-if="slowHint && slow">{{ slowHint }}</em>
+		</transition>
 	</div>
 	<div v-else class="container icon-loading"></div>
 </template>
@@ -12,10 +15,38 @@ export default {
 	props: {
 		hint: {
 			type: String,
-			default: () => undefined,
 		},
+		slowHint: {
+			type: String,
+			required: false,
+		},
+	},
+	data() {
+		return {
+			slow: false,
+			slowTimer: undefined,
+		}
+	},
+	mounted() {
+		clearTimeout(this.slowTimer)
+
+		this.slowTimer = setTimeout(() => {
+			this.slow = true
+		}, 3500)
+	},
+	beforeDestroy() {
+		clearTimeout(this.slowTimer)
 	},
 }
 </script>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.5s;
+}
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>
diff --git a/src/service/MessageService.js b/src/service/MessageService.js
index 1897ad176..cf1b5308f 100644
--- a/src/service/MessageService.js
+++ b/src/service/MessageService.js
@@ -22,7 +22,7 @@ export function fetchEnvelopes(accountId, folderId, query, cursor) {
 	}).then(resp => resp.data)
 }
 
-export function syncEnvelopes(accountId, folderId, syncToken, uids) {
+export function syncEnvelopes(accountId, folderId, uids) {
 	const url = generateUrl('/apps/mail/api/accounts/{accountId}/folders/{folderId}/sync', {
 		accountId,
 		folderId,
@@ -30,7 +30,6 @@ export function syncEnvelopes(accountId, folderId, syncToken, uids) {
 
 	return HttpClient.get(url, {
 		params: {
-			syncToken,
 			uids,
 		},
 	}).then(resp => resp.data)
diff --git a/src/store/actions.js b/src/store/actions.js
index 9a2008e7d..ca5e4a321 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -357,10 +357,9 @@ export default {
 			)
 		}
 
-		const syncToken = folder.syncToken
 		const uids = getters.getEnvelopes(accountId, folderId).map(env => env.id)
 
-		return syncEnvelopes(accountId, folderId, syncToken, uids).then(syncData => {
+		return syncEnvelopes(accountId, folderId, uids).then(syncData => {
 			const unifiedFolder = getters.getUnifiedFolder(folder.specialRole)
 
 			syncData.newMessages.forEach(envelope => {
@@ -391,10 +390,6 @@ export default {
 				})
 				// Already removed from unified inbox
 			})
-			commit('updateFolderSyncToken', {
-				folder,
-				syncToken: syncData.token,
-			})
 
 			return syncData.newMessages
 		})
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 28ee0f2b1..ad2e7a738 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -104,9 +104,6 @@ export default {
 			account.folders.push(id)
 		})
 	},
-	updateFolderSyncToken(state, {folder, syncToken}) {
-		folder.syncToken = syncToken
-	},
 	addEnvelope(state, {accountId, folder, envelope}) {
 		const uid = accountId + '-' + folder.id + '-' + envelope.id
 		envelope.accountId = accountId