feat: 🎸 Add debouncing for the search bar (#2008)

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11851

addons/core/addon/decorators/debounce.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import _debounce from 'lodash/debounce';
+
+/**
+ * Decorates a method whereby calls to the method will be debounced.
+ * @param timeToWait
+ * @param options
+ */
+export function debounce(timeToWait, options) {
+  return function (_target, _propertyKey, desc) {
+    const method = desc.value;
+
+    // Use a normal function to get the correct `this` for the function caller
+    desc.value = _debounce(
+      async function () {
+        return method.apply(this, arguments);
+      },
+      timeToWait,
+      options,
+    );
+  };
+}

addons/core/app/decorators/debounce.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from 'core/decorators/debounce';

ui/desktop/app/controllers/scopes/scope/projects/targets/index.js

@@ -8,6 +8,7 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { loading } from 'ember-loading';
 import { tracked } from '@glimmer/tracking';
+import { debounce } from 'core/decorators/debounce';
 
 export default class ScopesScopeProjectsTargetsIndexController extends Controller {
   // =services
@@ -133,11 +134,9 @@ export default class ScopesScopeProjectsTargetsIndexController extends Controlle
    * @param {object} event
    */
   @action
+  @debounce(250)
   handleSearchInput(event) {
     const { value } = event.target;
     this.search = value;
-    this.router.replaceWith({
-      queryParams: { ...this.queryParams, search: this.search },
-    });
   }
 }

ui/desktop/app/routes/scopes/scope/projects/targets/index.js

@@ -21,6 +21,7 @@ export default class ScopesScopeProjectsTargetsIndexRoute extends Route {
   queryParams = {
     search: {
       refreshModel: true,
+      replace: true,
     },
   };