From 7084b6ffc8cf7a55e6d7dbf66c9798093487a02f Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 24 May 2023 16:50:52 +0300
Subject: [PATCH] feat: Add tab visibility change detection when polling
 executions (no-changelog) (#6311)

feat: add tab visibility change detection when polling executions (no-changelog)
---
 .../src/components/ExecutionsList.vue         | 36 ++++++++++------
 .../ExecutionsView/ExecutionsSidebar.vue      | 42 ++++++++++++-------
 2 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index c9333c7f5b793..82c15abe37245 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -343,6 +343,7 @@ export default defineComponent({
 	},
 	mounted() {
 		setPageTitle(`n8n - ${this.pageTitle}`);
+		document.addEventListener('visibilitychange', this.onDocumentVisibilityChange);
 	},
 	async created() {
 		await this.loadWorkflows();
@@ -354,10 +355,8 @@ export default defineComponent({
 		});
 	},
 	beforeDestroy() {
-		if (this.autoRefreshInterval) {
-			clearInterval(this.autoRefreshInterval);
-			this.autoRefreshInterval = undefined;
-		}
+		this.stopAutoRefreshInterval();
+		document.removeEventListener('visibilitychange', this.onDocumentVisibilityChange);
 	},
 	computed: {
 		...mapStores(useUIStore, useWorkflowsStore),
@@ -412,15 +411,8 @@ export default defineComponent({
 			window.open(route.href, '_blank');
 		},
 		handleAutoRefreshToggle() {
-			if (this.autoRefreshInterval) {
-				// Clear any previously existing intervals (if any - there shouldn't)
-				clearInterval(this.autoRefreshInterval);
-				this.autoRefreshInterval = undefined;
-			}
-
-			if (this.autoRefresh) {
-				this.autoRefreshInterval = setInterval(() => this.loadAutoRefresh(), 4 * 1000); // refresh data every 4 secs
-			}
+			this.stopAutoRefreshInterval(); // Clear any previously existing intervals (if any - there shouldn't)
+			this.startAutoRefreshInterval();
 		},
 		handleCheckAllExistingChange() {
 			this.allExistingSelected = !this.allExistingSelected;
@@ -927,6 +919,24 @@ export default defineComponent({
 				this.selectAllVisibleExecutions();
 			}
 		},
+		startAutoRefreshInterval() {
+			if (this.autoRefresh) {
+				this.autoRefreshInterval = setInterval(() => this.loadAutoRefresh(), 4 * 1000); // refresh data every 4 secs
+			}
+		},
+		stopAutoRefreshInterval() {
+			if (this.autoRefreshInterval) {
+				clearInterval(this.autoRefreshInterval);
+				this.autoRefreshInterval = undefined;
+			}
+		},
+		onDocumentVisibilityChange() {
+			if (document.visibilityState === 'hidden') {
+				this.stopAutoRefreshInterval();
+			} else {
+				this.startAutoRefreshInterval();
+			}
+		},
 	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
index ff4b9518c4c3e..00e833ac15462 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
@@ -127,21 +127,38 @@ export default defineComponent({
 	},
 	mounted() {
 		this.autoRefresh = this.uiStore.executionSidebarAutoRefresh === true;
-		if (this.autoRefresh) {
-			this.autoRefreshInterval = setInterval(() => this.onRefresh(), 4000);
-		}
+		this.startAutoRefreshInterval();
+
 		// On larger screens, we need to load more then first page of executions
 		// for the scroll bar to appear and infinite scrolling is enabled
 		this.checkListSize();
 		this.scrollToActiveCard();
+
+		document.addEventListener('visibilitychange', this.onDocumentVisibilityChange);
 	},
 	beforeDestroy() {
-		if (this.autoRefreshInterval) {
-			clearInterval(this.autoRefreshInterval);
-			this.autoRefreshInterval = undefined;
-		}
+		this.stopAutoRefreshInterval();
+		document.removeEventListener('visibilitychange', this.onDocumentVisibilityChange);
 	},
 	methods: {
+		startAutoRefreshInterval() {
+			if (this.autoRefresh) {
+				this.autoRefreshInterval = setInterval(() => this.onRefresh(), 4000);
+			}
+		},
+		stopAutoRefreshInterval() {
+			if (this.autoRefreshInterval) {
+				clearInterval(this.autoRefreshInterval);
+				this.autoRefreshInterval = undefined;
+			}
+		},
+		onDocumentVisibilityChange() {
+			if (document.visibilityState === 'hidden') {
+				this.stopAutoRefreshInterval();
+			} else {
+				this.startAutoRefreshInterval();
+			}
+		},
 		loadMore(limit = 20): void {
 			if (!this.loading) {
 				const executionsListRef = this.$refs.executionList as HTMLElement | undefined;
@@ -169,14 +186,9 @@ export default defineComponent({
 		},
 		onAutoRefreshToggle(): void {
 			this.uiStore.executionSidebarAutoRefresh = this.autoRefresh;
-			if (this.autoRefreshInterval) {
-				// Clear any previously existing intervals (if any - there shouldn't)
-				clearInterval(this.autoRefreshInterval);
-				this.autoRefreshInterval = undefined;
-			}
-			if (this.autoRefresh) {
-				this.autoRefreshInterval = setInterval(() => this.onRefresh(), 4 * 1000); // refresh data every 4 secs
-			}
+
+			this.stopAutoRefreshInterval(); // Clear any previously existing intervals (if any - there shouldn't)
+			this.startAutoRefreshInterval();
 		},
 		checkListSize(): void {
 			const sidebarContainerRef = this.$refs.container as HTMLElement | undefined;