replace useDebouncedRef with @vueuse/useDebounce

src/stores/search.ts

@@ -11,10 +11,10 @@ import {
   loadMoreArtists,
 } from "../composables/fetch/searchMusic";
 import { watch } from "vue";
-import useDebouncedRef from "../utils/useDebouncedRef";
 import useTabStore from "./tabs";
 import useLoaderStore from "./loader";
 import { useRoute } from "vue-router";
+import { useDebounce } from "@vueuse/core";
 /**
  *
  * Scrolls on clicking the loadmore button
@@ -31,7 +31,8 @@ function scrollOnLoad() {
 
 export default defineStore("search", () => {
   // @ts-ignore
-  const query = useDebouncedRef(null, 600);
+  const query = ref("");
+  const debouncedQuery = useDebounce(query)
   const { startLoading, stopLoading } = useLoaderStore();
   const route = useRoute();
 
@@ -147,7 +148,7 @@ export default defineStore("search", () => {
   }
 
   watch(
-    () => query.value,
+    () => debouncedQuery.value,
     (newQuery) => {
       // reset all counters
       for (const key in loadCounter) {

src/utils/index.ts

@@ -2,7 +2,6 @@ import focusElem from "./useFocusElem";
 import putCommas from "./usePutCommas";
 import useVisibility from "./useVisibility";
 import formatSeconds from "./useFormatSeconds";
-import useDebouncedRef from "./useDebouncedRef";
 import createSubPaths from "./useCreateSubPaths";
 import { readLocalStorage, writeLocalStorage } from "./useLocalStorage";
 import useFuse from "./useFuse";
@@ -11,7 +10,6 @@ export {
   readLocalStorage,
   writeLocalStorage,
   createSubPaths,
-  useDebouncedRef,
   focusElem,
   useVisibility,
   formatSeconds,

src/utils/useDebouncedRef.ts

@@ -1,56 +0,0 @@
-import { customRef, Ref, ref } from "vue";
-
-/**
- * Debounces a function
- *
- * @param {*} fn The function to debounce
- * @param {*} delay The delay in milliseconds
- * @param {*} immediate whether to debounce immediately
- */
-const debounce = (
-  fn: (...params: any) => void,
-  delay: number = 0,
-  immediate: any = false
-) => {
-  let timeout: any;
-  return (...args: any) => {
-    if (immediate && !timeout) fn(...args);
-    clearTimeout(timeout);
-
-    timeout = setTimeout(() => {
-      fn(...args);
-    }, delay);
-  };
-};
-
-/**
- * Emits the ref updated value after the given delay.
- *
- * @param {*} initialValue The default value of the ref
- * @param {*} delay The delay in milliseconds
- * @param {*} immediate Whether to call the function immediately
- * @returns {Object} The ref and a function to call to update the ref
- */
-const useDebouncedRef = (
-  initialValue: string,
-  delay: number,
-  immediate = false
-) => {
-  const state = ref(initialValue);
-  return customRef((track, trigger) => ({
-    get() {
-      track();
-      return state.value;
-    },
-    set: debounce(
-      (value) => {
-        state.value = value;
-        trigger();
-      },
-      delay,
-      immediate
-    ),
-  }));
-};
-
-export default useDebouncedRef;