perf: don't show skeleton for cached mailboxes

Signed-off-by: Richard Steinmetz <[email protected]>

Author: st3iny

Diff for: src/components/EnvelopeList.vue

@@ -111,7 +111,7 @@
 			</div>
 		</transition>
 
-		<transition-group name="list">
+		<transition-group :name="listTransitionName">
 			<Envelope v-for="(env, index) in sortedEnvelops"
 				:key="env.databaseId"
 				:data="env"
@@ -209,11 +209,6 @@ export default {
 			required: false,
 			default: undefined,
 		},
-		refreshing: {
-			type: Boolean,
-			required: true,
-			default: true,
-		},
 		loadingMore: {
 			type: Boolean,
 			required: true,
@@ -223,6 +218,10 @@ export default {
 			required: false,
 			default: false,
 		},
+		skipTransition: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -238,7 +237,6 @@ export default {
 		sortOrder() {
 			return this.mainStore.getPreference('sort-order', 'newest')
 		},
-
 		sortedEnvelops() {
 			if (this.sortOrder === 'oldest') {
 				return [...this.envelopes].sort((a, b) => {
@@ -298,6 +296,9 @@ export default {
 			const mailboxIds = this.sortedEnvelops.map(envelope => envelope.mailboxId)
 			return Array.from(new Set(mailboxIds)).length > 1
 		},
+		listTransitionName() {
+			return this.skipTransition ? 'disabled' : 'list'
+		},
 	},
 	watch: {
 		sortedEnvelops(newVal, oldVal) {

Diff for: src/components/Mailbox.vue

@@ -20,9 +20,9 @@
 			:mailbox="mailbox"
 			:search-query="searchQuery"
 			:envelopes="envelopesToShow"
-			:refreshing="refreshing"
 			:loading-more="loadingMore"
 			:load-more-button="showLoadMore"
+			:skip-transition="skipListTransition"
 			@delete="onDelete"
 			@load-more="loadMore" />
 	</div>
@@ -102,6 +102,8 @@ export default {
 			loadMailboxInterval: undefined,
 			expanded: false,
 			endReached: false,
+			syncedMailboxes: new Set(),
+			skipListTransition: false,
 		}
 	},
 	computed: {
@@ -179,7 +181,17 @@ export default {
 		},
 		async loadEnvelopes() {
 			logger.debug(`Fetching envelopes for mailbox ${this.mailbox.databaseId} (${this.searchQuery})`, this.mailbox)
-			this.loadingEnvelopes = true
+
+			if (!this.syncedMailboxes.has(this.mailbox.databaseId)) {
+				// Only trigger skeleton if we didn't sync envelopes yet
+				this.loadingEnvelopes = true
+			} else {
+				this.skipListTransition = true
+				this.$nextTick(() => {
+					this.skipListTransition = false
+				})
+			}
+
 			this.loadingCacheInitialization = false
 			this.error = false
 
@@ -192,6 +204,7 @@ export default {
 
 				logger.debug(envelopes.length + ' envelopes fetched', { envelopes })
 
+				this.syncedMailboxes.add(this.mailbox.databaseId)
 				this.loadingEnvelopes = false
 			} catch (error) {
 				await matchError(error, {