perf(frontend): pause background polling when tab is hidden

src/App.vue

@@ -17,8 +17,16 @@ import initAfterAppCreation from './init.js'
 import logger from './logger.js'
 import useMainStore from './store/mainStore.js'
 
+const BACKGROUND_SYNC_INTERVAL = 30 * 1000
+
 export default {
 	name: 'App',
+	data() {
+		return {
+			syncing: false,
+		}
+	},
+
 	computed: {
 		...mapStores(useMainStore),
 		...mapState(useMainStore, [
@@ -64,6 +72,13 @@ export default {
 
 		sync() {
 			setTimeout(async () => {
+				// Don't sync while the tab is hidden or a previous sync is still running
+				if (document.hidden || this.syncing) {
+					this.sync()
+					return
+				}
+
+				this.syncing = true
 				try {
 					await this.mainStore.syncInboxes()
 
@@ -78,10 +93,11 @@ export default {
 						},
 					})
 				} finally {
+					this.syncing = false
 					// Start over
 					this.sync()
 				}
-			}, 30 * 1000)
+			}, BACKGROUND_SYNC_INTERVAL)
 		},
 	},
 }

src/components/Mailbox.vue

@@ -67,6 +67,8 @@ import useMainStore from '../store/mainStore.js'
 import { mailboxHasRights } from '../util/acl.js'
 import { wait } from '../util/wait.js'
 
+const BACKGROUND_SYNC_INTERVAL = 60 * 1000
+
 export default {
 	name: 'Mailbox',
 	components: {
@@ -200,7 +202,7 @@ export default {
 		this.bus.on('delete', this.onDelete)
 		this.bus.on('archive', this.onArchive)
 		this.bus.on('shortcut', this.handleShortcut)
-		this.loadMailboxInterval = setInterval(this.loadMailbox, 60000)
+		this.loadMailboxInterval = setInterval(this.loadMailbox, BACKGROUND_SYNC_INTERVAL)
 	},
 
 	async mounted() {
@@ -217,7 +219,7 @@ export default {
 		this.mainStore.setHasFetchedInitialEnvelopesMutation(true)
 	},
 
-	unmounted() {
+	destroyed() {
 		this.bus.off('load-more', this.onScroll)
 		this.bus.off('delete', this.onDelete)
 		this.bus.off('archive', this.onArchive)
@@ -587,6 +589,10 @@ export default {
 		},
 
 		async loadMailbox() {
+			// Skip the periodic background sync while the tab is hidden
+			if (document.hidden) {
+				return
+			}
 			// When the account is unified or inbox, return nothing, else sync the mailbox
 			if (this.account.isUnified || this.mailbox.specialRole === 'inbox') {
 				return

src/components/Outbox.vue

@@ -40,6 +40,8 @@ import OutboxMessageListItem from './OutboxMessageListItem.vue'
 import logger from '../logger.js'
 import useOutboxStore from '../store/outboxStore.js'
 
+const REFRESH_INTERVAL = 60 * 1000
+
 export default {
 	name: 'Outbox',
 	components: {
@@ -82,15 +84,19 @@ export default {
 	created() {
 		// Reload outbox contents every 60 seconds
 		this.refreshInterval = setInterval(async () => {
+			// Skip the periodic reload while the tab is hidden
+			if (document.hidden) {
+				return
+			}
 			await this.fetchMessages()
-		}, 60000)
+		}, REFRESH_INTERVAL)
 	},
 
 	async mounted() {
 		await this.fetchMessages()
 	},
 
-	unmounted() {
+	destroyed() {
 		clearInterval(this.refreshInterval)
 	},