Changeset 14098

Timestamp:

02/16/2025 03:37:07 PM (5 months ago)

Author:

espellcaste

Message:

Activity: Add debounce to @mentions remote filter for improved performance.

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 ​https://github.com/buddypress/buddypress/pull/350

File:

• trunk/src/bp-activity/js/mentions.js (modified) (5 diffs)

trunk/src/bp-activity/js/mentions.js

@@ -12 +12 @@
     if ( typeof window.BP_Suggestions === 'object' ) {
         bp.mentions.users = window.BP_Suggestions.friends || bp.mentions.users;
+    }
+
+    /**
+     * Define a debounce function to optimize performance by limiting the rate
+     * of AJAX requests for user mentions.
+     *
+     * This function ensures that the `func` is only called after `wait` milliseconds
+     * have passed since the last invocation, with an optional immediate execution.
+     * This helps reduce the frequency of AJAX requests and improves the efficiency of the @mentions feature.
+     *
+     * @param {Function} func The function to debounce.
+     * @param {number} wait The number of milliseconds to wait before calling `func`.
+     * @param {boolean} [immediate=true] Whether to call the function immediately.
+     * @returns {Function} A debounced version of the provided function.
+     */
+    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);
+            }
+        };
     }
 
@@ -158 +200 @@
                  * If there are no matches for the query in this.data, then query BuddyPress.
                  *
+                 * @since 2.1.0
+                 * @since 3.0.0. Renamed from "remote_filter" for at.js v1.5.4 support.
+                 *
                  * @param {string} query Partial @mention to search for.
                  * @param {function} render_view Render page callback function.
-                 * @since 2.1.0
-                 * @since 3.0.0. Renamed from "remote_filter" for at.js v1.5.4 support.
-                 */
-                remoteFilter: function( query, render_view ) {
+                 */
+                remoteFilter: debounce(function( query, render_view ) {
                     var self = $( this ),
                         params = {};
+
+                    // Skip AJAX request if query is empty.
+                    if (!query.trim()) {
+                        // Return an empty array to indicate no results.
+                        render_view([]);
+                        return;
+                    }
 
                     mentionsItem = mentionsQueryCache[ query ];
@@ -188 +238 @@
                          * Success callback for the @suggestions lookup.
                          *
+                         * @since 2.1.0
+                         *
                          * @param {object} response Details of users matching the query.
-                         * @since 2.1.0
                          */
                         .done(function( response ) {
@@ -201 +252 @@
                                  * nicename matches will appear on top.
                                  *
+                                 * @since 2.1.0
+                                 *
                                  * @param {array} suggestion A suggestion's original data.
                                  * @return {array} A suggestion's new data.
-                                 * @since 2.1.0
                                  */
                                 function( suggestion ) {
@@ -214 +266 @@
                             render_view( data );
                         });
-                }
+                }, 500) // 500ms debounce time.
             },