Fix: Use Debounce on Search

src/modules/resource/components/create-resource/ApplicationProfile.vue

@@ -149,6 +149,7 @@ import type {
 import useVuelidate from "@vuelidate/core";
 import { required, url } from "@vuelidate/validators";
 import CreateAPModal from "./modals/CreateAPModal.vue";
+import { useDebounceFn } from "@vueuse/core";
 
 export default defineComponent({
   components: {
@@ -190,7 +191,7 @@ export default defineComponent({
     reachedEndOfAPList: () => true,
     valid: (_: boolean) => true,
   },
-  setup(props) {
+  setup(props, ctx) {
     const resourceStore = useResourceStore();
     const userStore = useUserStore();
     /*
@@ -208,7 +209,14 @@ export default defineComponent({
       },
     };
     const v$ = useVuelidate(rules, state);
-    return { resourceStore, userStore, v$ };
+    const applicationProfileSearchChange = useDebounceFn(
+      (searchTerm: string) => {
+        ctx.emit("applicationProfileSearchChange", searchTerm);
+      },
+      500,
+    );
+
+    return { applicationProfileSearchChange, resourceStore, userStore, v$ };
   },
 
   data() {
@@ -249,12 +257,6 @@ export default defineComponent({
   },
 
   methods: {
-    /**
-     * Trigger the search term change in the parent component.
-     */
-    applicationProfileSearchChange(searchTerm: string) {
-      this.$emit("applicationProfileSearchChange", searchTerm);
-    },
     /**
      * Initializes the content of the selected application profile based on the current state of the resource for creation.
      */