Add debounce to @mentions remote filter for improved performance #350

Praveenkroot · 2024-07-25T11:04:16Z

Add debounce function to improve performance of @mentions remote filter

Integrated debounce function to throttle the frequency of remoteFilter calls.
Enhanced user experience by reducing the number of AJAX requests made during typing.
Updated the remoteFilter callback in mentions.js to use debounce.
Adjusted debounce delay to 300ms to balance responsiveness and performance.

This change aims to optimize the performance of the @mentions feature by minimizing unnecessary AJAX requests and improving overall responsiveness.

Trac ticket: https://buddypress.trac.wordpress.org/ticket/9239

This Pull Request is for code review only. Please keep all other discussion in the BuddyPress Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the WordPress Core Handbook for more details.

Add debounce function to improve performance of @mentions remote filter - Integrated debounce function to throttle the frequency of remoteFilter calls. - Enhanced user experience by reducing the number of AJAX requests made during typing. - Updated the remoteFilter callback in mentions.js to use debounce. - Adjusted debounce delay to 300ms to balance responsiveness and performance. This change aims to optimize the performance of the @mentions feature by minimizing unnecessary AJAX requests and improving overall responsiveness.

renatonascalves · 2024-07-25T11:36:25Z

src/bp-activity/js/mentions.js

+	 * @param {number} wait The number of milliseconds to wait before calling `func`.
+	 * @returns {Function} A debounced version of the provided function.
+	 */
+	function debounce(func, wait) {


We actually have some prior art. Could we add this in a way that can be reshared?

buddypress/src/bp-templates/bp-nouveau/js/buddypress-priority-menu.js

Lines 17 to 44 in 151f093

function debounce(func, wait, immediate) {

'use strict';

var timeout;

wait = (typeof wait !== 'undefined') ? wait : 20;

immediate = (typeof immediate !== 'undefined') ? immediate : true;

return function() {

var context = this, args = arguments;

var later = function() {

timeout = null;

if (!immediate) {

func.apply(context, args);

}

};

var callNow = immediate && !timeout;

clearTimeout(timeout);

timeout = setTimeout(later, wait);

if (callNow) {

func.apply(context, args);

}

};

}

Hi @renatonascalves

I've implemented the changes:

Updated the debounce function to ensure consistency with existing code.

Added functionality to skip AJAX requests if the query is empty.

Please review the latest commit and let me know if there are any further adjustments needed.

I actually meant that we could reuse the same code in both places.

Thank you for the clarification. I understand your suggestion to reuse the same debounce function across different parts of the project. To achieve this, I propose extracting the debounce function from buddypress/src/bp-templates/bp-nouveau/js/buddypress-priority-menu.js and placing it in a shared location that can be imported where needed.

Specifically, we can create a common utility file, utils.js, where we define the debounce function. Then, we can update both mentions.js and buddypress-priority-menu.js to import and use the debounce function from utils.js. This approach ensures consistency and reduces redundancy, as any updates to the debounce function will only need to be made in one place.

Would you agree with this approach? If so, could you please advise on the best location to place this shared function? I'll go ahead and implement these changes once I have your approval.

@imath Do you have suggestions for the location of this shared util file?

renatonascalves · 2024-07-25T11:37:31Z

A trac ticket would be great too.

- Modified the debounce function to include an option for immediate execution of the function. - Updated the remoteFilter to skip AJAX requests when the query is empty, ensuring that no unnecessary network calls are made.

renatonascalves · 2024-08-27T01:53:11Z

src/bp-activity/js/mentions.js

+		var timeout; 
+		wait      = (typeof wait !== 'undefined') ? wait : 20; 
+	        immediate = (typeof immediate !== 'undefined') ? immediate : true; 


Looks like there is some spacing issues here.

I've updated the spacing issues.

renatonascalves · 2024-08-27T01:53:23Z

src/bp-activity/js/mentions.js

+					if (!query.trim()) {
+				        	render_view([]); // Return an empty array to indicate no results
+				        	return;


renatonascalves · 2024-08-27T01:54:19Z

@Praveenkroot Let's not try to reuse this functionality. It might be harder than I expected. And might require a large conversation. We can fix the issue here with the current implementation.

Can you create a ticket https://buddypress.trac.wordpress.org/newticket related to this issue?

…alization * Standardized indentation and spacing in the variable initialization section. * Corrected inconsistent indentation and spacing in the AJAX request handling code.

Praveenkroot · 2024-08-29T08:43:41Z

@renatonascalves Thank you for the feedback. I understand that reusing the functionality might be complex and could require extensive discussion. I’ll focus on addressing the issue with the current implementation as you suggested.

I will create a ticket on BuddyPress Trac regarding this issue and provide a link to it here.

Thanks for your guidance!

renatonascalves · 2024-09-28T03:42:10Z

@Praveenkroot I think this pr is only pending a ticket with more information and possibly some testing steps.

Praveenkroot · 2024-09-28T08:43:51Z

Hi @renatonascalves,

I've created the Trac ticket as requested, which includes additional details and testing steps for the issue we discussed.

You can find the ticket here: https://buddypress.trac.wordpress.org/ticket/9239#ticket

Please let me know if there’s anything else you'd like to see added or adjusted.

Thanks again for your guidance and feedback!

renatonascalves · 2025-02-16T15:44:55Z

Thanks @Praveenkroot 🤟🏽

…ormance. This change aims to optimize the performance of the `@mentions` feature by minimizing unnecessary AJAX requests and improving overall responsiveness. Props praveenkumar98. Fixes #9239 Closes buddypress/buddypress#350 git-svn-id: http://buddypress.svn.wordpress.org/trunk@14098 cdf35c40-ae34-48e0-9cc9-0c9da1808c22

…ormance. This change aims to optimize the performance of the `@mentions` feature by minimizing unnecessary AJAX requests and improving overall responsiveness. Props praveenkumar98. Fixes #9239 Closes buddypress/buddypress#350 git-svn-id: https://buddypress.svn.wordpress.org/trunk@14098 cdf35c40-ae34-48e0-9cc9-0c9da1808c22

renatonascalves requested changes Jul 25, 2024

View reviewed changes

Praveenkroot requested a review from renatonascalves July 26, 2024 12:18

renatonascalves requested changes Aug 27, 2024

View reviewed changes

renatonascalves assigned Praveenkroot Aug 27, 2024

renatonascalves added the enhancement label Aug 27, 2024

Fix indentation and spacing issues in AJAX request and variable initi…

9b98377

…alization * Standardized indentation and spacing in the variable initialization section. * Corrected inconsistent indentation and spacing in the AJAX request handling code.

Praveenkroot closed this Aug 29, 2024

Praveenkroot deleted the patch-1 branch August 29, 2024 08:44

Praveenkroot restored the patch-1 branch August 29, 2024 08:45

Praveenkroot reopened this Aug 29, 2024

Praveenkroot closed this Sep 28, 2024

Praveenkroot reopened this Sep 28, 2024

boonebgorges closed this in fd04ca2 Feb 16, 2025

	function debounce(func, wait, immediate) {
	'use strict';

	var timeout;
	wait = (typeof wait !== 'undefined') ? wait : 20;
	immediate = (typeof immediate !== 'undefined') ? immediate : true;

	return function() {

	var context = this, args = arguments;
	var later = function() {
	timeout = null;

	if (!immediate) {
	func.apply(context, args);
	}
	};

	var callNow = immediate && !timeout;

	clearTimeout(timeout);
	timeout = setTimeout(later, wait);

	if (callNow) {
	func.apply(context, args);
	}
	};
	}

Add debounce to @mentions remote filter for improved performance #350

Add debounce to @mentions remote filter for improved performance #350

Uh oh!

Conversation

Praveenkroot commented Jul 25, 2024 • edited by imath Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

renatonascalves Jul 25, 2024

Choose a reason for hiding this comment

Uh oh!

Praveenkroot Jul 25, 2024

Choose a reason for hiding this comment

Uh oh!

renatonascalves Jul 27, 2024

Choose a reason for hiding this comment

Uh oh!

Praveenkroot Jul 28, 2024

Choose a reason for hiding this comment

Uh oh!

renatonascalves Aug 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

renatonascalves commented Jul 25, 2024

Uh oh!

renatonascalves Aug 27, 2024

Choose a reason for hiding this comment

Uh oh!

Praveenkroot Aug 29, 2024

Choose a reason for hiding this comment

Uh oh!

renatonascalves Aug 27, 2024

Choose a reason for hiding this comment

Uh oh!

renatonascalves commented Aug 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Praveenkroot commented Aug 29, 2024

Uh oh!

renatonascalves commented Sep 28, 2024

Uh oh!

Praveenkroot commented Sep 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

renatonascalves commented Feb 16, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Praveenkroot commented Jul 25, 2024 •

edited by imath

Loading

renatonascalves Aug 9, 2024 •

edited

Loading

renatonascalves commented Aug 27, 2024 •

edited

Loading

Praveenkroot commented Sep 28, 2024 •

edited

Loading