Merge pull request #11452 from nextcloud/feat/noid/fix-debounce-functions

chore(deps): update all debounce methods

16 files changed, 123 insertions, 84 deletions

diff --git a/src/App.vue b/src/App.vue
index 0ef891f26..8dfeebafb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -96,6 +96,7 @@ export default {
 			loading: false,
 			isRefreshingCurrentConversation: false,
 			recordingConsentGiven: false,
+			debounceRefreshCurrentConversation: () => {},
 		}
 	},
 
@@ -256,6 +257,7 @@ export default {
 	},
 
 	beforeDestroy() {
+		this.debounceRefreshCurrentConversation.clear?.()
 		if (!getCurrentUser()) {
 			EventBus.$off('should-refresh-conversations', this.debounceRefreshCurrentConversation)
 		}
@@ -479,6 +481,8 @@ export default {
 	},
 
 	async mounted() {
+		this.debounceRefreshCurrentConversation = debounce(this.refreshCurrentConversation, 3000)
+
 		if (!IS_DESKTOP) {
 			checkBrowser()
 		}
@@ -581,12 +585,6 @@ export default {
 			this.fetchSingleConversation(this.token)
 		},
 
-		debounceRefreshCurrentConversation: debounce(function() {
-			if (!this.isRefreshingCurrentConversation) {
-				this.refreshCurrentConversation()
-			}
-		}, 3000),
-
 		changeWindowVisibility() {
 			this.$store.dispatch('setWindowVisibility', !document.hidden)
 			if (this.windowIsVisible) {
@@ -655,6 +653,9 @@ export default {
 		},
 
 		async fetchSingleConversation(token) {
+			if (this.isRefreshingCurrentConversation) {
+				return
+			}
 			this.isRefreshingCurrentConversation = true
 
 			try {
diff --git a/src/components/AdminSettings/AllowedGroups.vue b/src/components/AdminSettings/AllowedGroups.vue
index 0a9ac46af..2209d0e35 100644
--- a/src/components/AdminSettings/AllowedGroups.vue
+++ b/src/components/AdminSettings/AllowedGroups.vue
@@ -54,7 +54,7 @@
 				track-by="id"
 				label="displayname"
 				no-wrap
-				@search-change="searchGroup" />
+				@search-change="debounceSearchGroup" />
 
 			<NcButton type="primary"
 				:disabled="loading"
@@ -84,7 +84,7 @@
 				track-by="id"
 				label="displayname"
 				no-wrap
-				@search-change="searchGroup" />
+				@search-change="debounceSearchGroup" />
 
 			<NcButton type="primary"
 				:disabled="loading"
@@ -155,6 +155,8 @@ export default {
 
 			startCallOptions,
 			startCalls: startCallOptions[0],
+
+			debounceSearchGroup: () => {},
 		}
 	},
 
@@ -183,11 +185,16 @@ export default {
 		})
 		this.loading = false
 
-		this.searchGroup('')
+		this.debounceSearchGroup = debounce(this.searchGroup, 500)
+		this.debounceSearchGroup('')
+	},
+
+	beforeDestroy() {
+		this.debounceSearchGroup.clear?.()
 	},
 
 	methods: {
-		searchGroup: debounce(async function(query) {
+		async searchGroup(query) {
 			this.loadingGroups = true
 			try {
 				const response = await axios.get(generateOcsUrl('cloud/groups/details'), {
@@ -203,7 +210,7 @@ export default {
 			} finally {
 				this.loadingGroups = false
 			}
-		}, 500),
+		},
 
 		saveAllowedGroups() {
 			this.loading = true
diff --git a/src/components/AdminSettings/RecordingServers.vue b/src/components/AdminSettings/RecordingServers.vue
index 543350d90..5796b0e59 100644
--- a/src/components/AdminSettings/RecordingServers.vue
+++ b/src/components/AdminSettings/RecordingServers.vue
@@ -143,6 +143,7 @@ export default {
 			loading: false,
 			saved: false,
 			recordingConsentSelected: loadState('spreed', 'recording_consent').toString(),
+			debounceUpdateServers: () => {},
 		}
 	},
 
@@ -158,12 +159,17 @@ export default {
 	},
 
 	beforeMount() {
+		this.debounceUpdateServers = debounce(this.updateServers, 1000)
 		const state = loadState('spreed', 'recording_servers')
 		this.servers = state.servers
 		this.secret = state.secret
 		this.uploadLimit = parseInt(state.uploadLimit, 10)
 	},
 
+	beforeDestroy() {
+		this.debounceUpdateServers.clear?.()
+	},
+
 	methods: {
 		removeServer(index) {
 			this.servers.splice(index, 1)
@@ -182,10 +188,6 @@ export default {
 			this.debounceUpdateServers()
 		},
 
-		debounceUpdateServers: debounce(function() {
-			this.updateServers()
-		}, 1000),
-
 		async updateServers() {
 			this.loading = true
 
diff --git a/src/components/AdminSettings/SIPBridge.vue b/src/components/AdminSettings/SIPBridge.vue
index 87bc4e80d..4fd0dc189 100644
--- a/src/components/AdminSettings/SIPBridge.vue
+++ b/src/components/AdminSettings/SIPBridge.vue
@@ -56,7 +56,7 @@
 				track-by="id"
 				label="displayname"
 				no-wrap
-				@search-change="searchGroup" />
+				@search-change="debounceSearchGroup" />
 			<p class="settings-hint settings-hint--after-select">
 				{{ t('spreed', 'Only users of the following groups can enable SIP in conversations they moderate') }}
 			</p>
@@ -137,6 +137,7 @@ export default {
 			dialOutEnabled: false,
 			currentSetup: {},
 			dialOutSupported: false,
+			debounceSearchGroup: () => {},
 		}
 	},
 
@@ -150,6 +151,7 @@ export default {
 	},
 
 	mounted() {
+		this.debounceSearchGroup = debounce(this.searchGroup, 500)
 		this.loading = true
 		this.groups = loadState('spreed', 'sip_bridge_groups').sort(function(a, b) {
 			return a.displayname.localeCompare(b.displayname)
@@ -158,7 +160,7 @@ export default {
 		this.dialInInfo = loadState('spreed', 'sip_bridge_dialin_info')
 		this.dialOutEnabled = loadState('spreed', 'sip_bridge_dialout')
 		this.sharedSecret = loadState('spreed', 'sip_bridge_shared_secret')
-		this.searchGroup('')
+		this.debounceSearchGroup('')
 		this.loading = false
 		this.saveCurrentSetup()
 		const signaling = loadState('spreed', 'signaling_servers')
@@ -166,8 +168,12 @@ export default {
 		this.isDialoutSupported()
 	},
 
+	beforeDestroy() {
+		this.debounceSearchGroup.clear?.()
+	},
+
 	methods: {
-		searchGroup: debounce(async function(query) {
+		async searchGroup(query) {
 			this.loadingGroups = true
 			try {
 				const response = await axios.get(generateOcsUrl('cloud/groups/details'), {
@@ -183,7 +189,7 @@ export default {
 			} finally {
 				this.loadingGroups = false
 			}
-		}, 500),
+		},
 
 		saveCurrentSetup() {
 			this.currentSetup = {
diff --git a/src/components/AdminSettings/SignalingServers.vue b/src/components/AdminSettings/SignalingServers.vue
index c416ba5d8..b02b6c432 100644
--- a/src/components/AdminSettings/SignalingServers.vue
+++ b/src/components/AdminSettings/SignalingServers.vue
@@ -122,16 +122,22 @@ export default {
 			saved: false,
 			isCacheConfigured: loadState('spreed', 'has_cache_configured'),
 			isClusteredMode: loadState('spreed', 'signaling_mode') === SIGNALING.MODE.CLUSTER_CONVERSATION,
+			debounceUpdateServers: () => {},
 		}
 	},
 
 	beforeMount() {
+		this.debounceUpdateServers = debounce(this.updateServers, 1000)
 		const state = loadState('spreed', 'signaling_servers')
 		this.servers = state.servers
 		this.secret = state.secret
 		this.hideWarning = state.hideWarning
 	},
 
+	beforeDestroy() {
+		this.debounceUpdateServers.clear?.()
+	},
+
 	methods: {
 		removeServer(index) {
 			this.servers.splice(index, 1)
@@ -163,10 +169,6 @@ export default {
 			this.debounceUpdateServers()
 		},
 
-		debounceUpdateServers: debounce(function() {
-			this.updateServers()
-		}, 1000),
-
 		async updateServers() {
 			this.loading = true
 
diff --git a/src/components/AdminSettings/StunServers.vue b/src/components/AdminSettings/StunServers.vue
index 335c624c7..538ff2581 100644
--- a/src/components/AdminSettings/StunServers.vue
+++ b/src/components/AdminSettings/StunServers.vue
@@ -84,12 +84,18 @@ export default {
 			hasInternetConnection: true,
 			loading: false,
 			saved: false,
+			debounceUpdateServers: () => {},
 		}
 	},
 
 	beforeMount() {
 		this.servers = loadState('spreed', 'stun_servers')
 		this.hasInternetConnection = loadState('spreed', 'has_internet_connection')
+		this.debounceUpdateServers = debounce(this.updateServers, 1000)
+	},
+
+	beforeDestroy() {
+		this.debounceUpdateServers.clear?.()
 	},
 
 	methods: {
@@ -111,10 +117,6 @@ export default {
 			}
 		},
 
-		debounceUpdateServers: debounce(function() {
-			this.updateServers()
-		}, 1000),
-
 		async updateServers() {
 			this.loading = true
 			const servers = []
diff --git a/src/components/AdminSettings/TurnServer.vue b/src/components/AdminSettings/TurnServer.vue
index 96a85febc..ebbbc2f37 100644
--- a/src/components/AdminSettings/TurnServer.vue
+++ b/src/components/AdminSettings/TurnServer.vue
@@ -164,6 +164,7 @@ export default {
 			testing: false,
 			testingError: false,
 			testingSuccess: false,
+			debounceTestServer: () => {},
 		}
 	},
 
@@ -210,16 +211,17 @@ export default {
 	},
 
 	mounted() {
+		this.debounceTestServer = debounce(this.testServer, 1000)
 		this.testing = false
 		this.testingError = false
 		this.testingSuccess = false
 	},
 
-	methods: {
-		debounceTestServer: debounce(function() {
-			this.testServer()
-		}, 1000),
+	beforeDestroy() {
+		this.debounceTestServer.clear?.()
+	},
 
+	methods: {
 		testServer() {
 			this.testing = true
 			this.testingError = false
diff --git a/src/components/AdminSettings/TurnServers.vue b/src/components/AdminSettings/TurnServers.vue
index 03b5ac5bc..df36df04e 100644
--- a/src/components/AdminSettings/TurnServers.vue
+++ b/src/components/AdminSettings/TurnServers.vue
@@ -88,6 +88,7 @@ export default {
 			servers: [],
 			loading: false,
 			saved: false,
+			debounceUpdateServers: () => {},
 		}
 	},
 
@@ -100,9 +101,14 @@ export default {
 	},
 
 	beforeMount() {
+		this.debounceUpdateServers = debounce(this.updateServers, 1000)
 		this.servers = loadState('spreed', 'turn_servers')
 	},
 
+	beforeDestroy() {
+		this.debounceUpdateServers.clear?.()
+	},
+
 	methods: {
 		removeServer(index) {
 			this.servers.splice(index, 1)
@@ -118,10 +124,6 @@ export default {
 			})
 		},
 
-		debounceUpdateServers: debounce(function() {
-			this.updateServers()
-		}, 1000),
-
 		async updateServers() {
 			const servers = []
 
diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index a97095c46..cd6e586e9 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -250,6 +250,7 @@ export default {
 			callParticipantCollection,
 			isBackgroundBlurred: true,
 			showPresenterOverlay: true,
+			debounceFetchPeers: () => {},
 		}
 	},
 	computed: {
@@ -493,6 +494,7 @@ export default {
 		this.isBackgroundBlurred = BrowserStorage.getItem('background-blurred') !== 'false'
 	},
 	mounted() {
+		this.debounceFetchPeers = debounce(this.fetchPeers, 1500)
 		EventBus.$on('refresh-peer-list', this.debounceFetchPeers)
 
 		callParticipantCollection.on('remove', this._lowerHandWhenParticipantLeaves)
@@ -501,6 +503,7 @@ export default {
 		subscribe('set-background-blurred', this.setBackgroundBlurred)
 	},
 	beforeDestroy() {
+		this.debounceFetchPeers.clear?.()
 		EventBus.$off('refresh-peer-list', this.debounceFetchPeers)
 
 		callParticipantCollection.off('remove', this._lowerHandWhenParticipantLeaves)
@@ -719,7 +722,7 @@ export default {
 			this.$store.dispatch('startPresentation')
 		},
 
-		debounceFetchPeers: debounce(async function() {
+		async fetchPeers() {
 			// The recording participant does not have a Nextcloud session, so
 			// it can not fetch the peers. This should not be a problem, as all
 			// the needed data for the recording should be (eventually)
@@ -743,7 +746,7 @@ export default {
 				// Just means guests have no name, so don't error …
 				console.error(exception)
 			}
-		}, 1500),
+		},
 
 		adjustSimulcastQuality() {
 			this.callParticipantModels.forEach(callParticipantModel => {
diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 182352492..16b728ef4 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -304,6 +304,7 @@ export default {
 			showVideoOverlay: true,
 			// Timer for the videos bottom bar
 			showVideoOverlayTimer: null,
+			debounceMakeGrid: () => {},
 		}
 	},
 
@@ -546,6 +547,7 @@ export default {
 
 	// bind event handlers to the `handleResize` method
 	mounted() {
+		this.debounceMakeGrid = debounce(this.makeGrid, 200)
 		window.addEventListener('resize', this.handleResize)
 		subscribe('navigation-toggled', this.handleResize)
 		this.makeGrid()
@@ -553,6 +555,7 @@ export default {
 		window.OCA.Talk.gridDebugInformation = this.gridDebugInformation
 	},
 	beforeDestroy() {
+		this.debounceMakeGrid.clear?.()
 		window.OCA.Talk.gridDebugInformation = () => console.debug('Not in a call')
 
 		window.removeEventListener('resize', this.handleResize)
@@ -672,7 +675,7 @@ export default {
 			// currently if the user is not on the 'first page', upon resize the
 			// current position in the videos array is lost (first element
 			// in the grid goes back to be first video)
-			debounce(this.makeGrid, 200)
+			this.debounceMakeGrid()
 		},
 
 		// Find the right size if the grid in rows and columns (we already know
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index c21280210..ebdf3d4e1 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -395,6 +395,9 @@ export default {
 			initialisedConversations: false,
 			cancelSearchPossibleConversations: () => {},
 			cancelSearchListedConversations: () => {},
+			debounceFetchSearchResults: () => {},
+			debounceFetchConversations: () => {},
+			debounceHandleScroll: () => {},
 			// Keeps track of whether the conversation list is scrolled to the top or not
 			isScrolledToTop: true,
 			refreshTimer: null,
@@ -569,6 +572,10 @@ export default {
 	},
 
 	mounted() {
+		this.debounceFetchSearchResults = debounce(this.fetchSearchResults, 250)
+		this.debounceFetchConversations = debounce(this.fetchConversations, 3000)
+		this.debounceHandleScroll = debounce(this.handleScroll, 50)
+
 		EventBus.$on('should-refresh-conversations', this.handleShouldRefreshConversations)
 		EventBus.$once('conversations-received', this.handleConversationsReceived)
 		EventBus.$on('route-change', this.onRouteChange)
@@ -577,6 +584,10 @@ export default {
 	},
 
 	beforeDestroy() {
+		this.debounceFetchSearchResults.clear?.()
+		this.debounceFetchConversations.clear?.()
+		this.debounceHandleScroll.clear?.()
+
 		EventBus.$off('should-refresh-conversations', this.handleShouldRefreshConversations)
 		EventBus.$off('conversations-received', this.handleUnreadMention)
 		EventBus.$off('route-change', this.onRouteChange)
@@ -628,12 +639,6 @@ export default {
 				this.preventFindingUnread = false
 			}, 500)
 		},
-		debounceFetchSearchResults: debounce(function() {
-			this.resetNavigation()
-			if (this.isSearching) {
-				this.fetchSearchResults()
-			}
-		}, 250),
 
 		async fetchPossibleConversations() {
 			this.contactsLoading = true
@@ -690,6 +695,10 @@ export default {
 		},
 
 		async fetchSearchResults() {
+			if (!this.isSearching) {
+				return
+			}
+			this.resetNavigation()
 			await Promise.all([this.fetchPossibleConversations(), this.fetchListedConversations()])
 			this.initializeNavigation()
 		},
@@ -786,10 +795,6 @@ export default {
 			this.debounceFetchConversations()
 		},
 
-		debounceFetchConversations: debounce(function() {
-			this.fetchConversations()
-		}, 3000),
-
 		async fetchConversations() {
 			if (this.isFetchingConversations) {
 				return
@@ -856,6 +861,7 @@ export default {
 		// or not
 		handleScroll() {
 			this.isScrolledToTop = this.$refs.scroller.$el.scrollTop === 0
+			this.handleUnreadMention()
 		},
 
 		/**
@@ -874,11 +880,6 @@ export default {
 			}
 		},
 
-		debounceHandleScroll: debounce(function() {
-			this.handleScroll()
-			this.handleUnreadMention()
-		}, 50),
-
 		async scrollToConversation(token) {
 			await this.$nextTick()
 
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index dc5f4b1eb..44d618b54 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -165,6 +165,10 @@ export default {
 			destroying: false,
 
 			expirationInterval: null,
+
+			debounceUpdateReadMarkerPosition: () => {},
+
+			debounceHandleScroll: () => {},
 		}
 	},
 
@@ -276,6 +280,9 @@ export default {
 	},
 
 	mounted() {
+		this.debounceUpdateReadMarkerPosition = debounce(this.updateReadMarkerPosition, 1000)
+		this.debounceHandleScroll = debounce(this.handleScroll, 50)
+
 		this.viewId = uniqueId('messagesList')
 		this.scrollToBottom()
 		EventBus.$on('scroll-chat-to-bottom', this.handleScrollChatToBottomEvent)
@@ -297,6 +304,9 @@ export default {
 	},
 
 	beforeDestroy() {
+		this.debounceUpdateReadMarkerPosition.clear?.()
+		this.debounceHandleScroll.clear?.()
+
 		window.removeEventListener('focus', this.onWindowFocus)
 		EventBus.$off('scroll-chat-to-bottom', this.handleScrollChatToBottomEvent)
 		EventBus.$off('smooth-scroll-chat-to-bottom', this.smoothScrollToBottom)
@@ -753,10 +763,6 @@ export default {
 			}, 500)
 		},
 
-		debounceHandleScroll: debounce(function() {
-			this.handleScroll()
-		}, 50),
-
 		/**
 		 * When the div is scrolled, this method checks if it's been scrolled to the top
 		 * or to the bottom of the list bottom.
@@ -879,10 +885,6 @@ export default {
 			})
 		},
 
-		debounceUpdateReadMarkerPosition: debounce(function() {
-			this.updateReadMarkerPosition()
-		}, 1000),
-
 		/**
 		 * Finds the last visual read message element
 		 *
diff --git a/src/components/NewConversationDialog/NewConversationContactsPage.vue b/src/components/NewConversationDialog/NewConversationContactsPage.vue
index 2c5dfcb39..db14e1081 100644
--- a/src/components/NewConversationDialog/NewConversationContactsPage.vue
+++ b/src/components/NewConversationDialog/NewConversationContactsPage.vue
@@ -152,6 +152,7 @@ export default {
 			noResults: false,
 			participantPhoneItem: {},
 			cancelSearchPossibleConversations: () => {},
+			debounceFetchSearchResults: () => {},
 		}
 	},
 
@@ -174,6 +175,8 @@ export default {
 	},
 
 	mounted() {
+		this.debounceFetchSearchResults = debounce(this.fetchSearchResults, 250)
+
 		this.$nextTick(() => {
 			// Focus the input field of the current component.
 			this.focusInput()
@@ -183,6 +186,8 @@ export default {
 	},
 
 	beforeDestroy() {
+		this.debounceFetchSearchResults.clear?.()
+
 		this.cancelSearchPossibleConversations()
 		this.cancelSearchPossibleConversations = null
 	},
@@ -204,12 +209,8 @@ export default {
 			this.focusInput()
 		},
 
-		debounceFetchSearchResults: debounce(function() {
-			this.resetNavigation()
-			this.fetchSearchResults()
-		}, 250),
-
 		async fetchSearchResults() {
+			this.resetNavigation()
 			this.contactsLoading = true
 			try {
 				this.cancelSearchPossibleConversations('canceled')
diff --git a/src/components/RightSidebar/Participants/ParticipantsTab.vue b/src/components/RightSidebar/Participants/ParticipantsTab.vue
index 52eb12958..5620b0881 100644
--- a/src/components/RightSidebar/Participants/ParticipantsTab.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsTab.vue
@@ -144,6 +144,7 @@ export default {
 			contactsLoading: false,
 			participantPhoneItem: {},
 			cancelSearchPossibleConversations: () => {},
+			debounceFetchSearchResults: () => {},
 		}
 	},
 
@@ -203,12 +204,16 @@ export default {
 	},
 
 	beforeMount() {
+		this.debounceFetchSearchResults = deb