Fixed: Loading suggestions for header search input

frontend/src/Components/Form/Tag/TagInput.tsx

@@ -14,7 +14,7 @@ import {
   RenderSuggestion,
   SuggestionsFetchRequestedParams,
 } from 'react-autosuggest';
-import useDebouncedCallback from 'Helpers/Hooks/useDebouncedCallback';
+import { useDebouncedCallback } from 'use-debounce';
 import { Kind } from 'Helpers/Props/kinds';
 import { InputChanged } from 'typings/inputs';
 import AutoSuggestInput from '../AutoSuggestInput';

frontend/src/Components/Page/Header/MovieSearchInput.tsx

@@ -13,10 +13,10 @@ import React, {
 import Autosuggest from 'react-autosuggest';
 import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
+import { useDebouncedCallback } from 'use-debounce';
 import { Tag } from 'App/State/TagsAppState';
 import Icon from 'Components/Icon';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import useDebouncedCallback from 'Helpers/Hooks/useDebouncedCallback';
 import useKeyboardShortcuts from 'Helpers/Hooks/useKeyboardShortcuts';
 import { icons } from 'Helpers/Props';
 import Movie from 'Movie/Movie';
@@ -187,6 +187,8 @@ function MovieSearchInput() {
   );
 
   const requestSuggestions = useDebouncedCallback((value: string) => {
+    console.warn({ value });
+
     if (!isLoading.current) {
       return;
     }

frontend/src/Helpers/Hooks/useDebouncedCallback.tsx

@@ -1,16 +0,0 @@
-import { debounce, DebouncedFunc, DebounceSettings } from 'lodash';
-import { useCallback } from 'react';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function useDebouncedCallback<T extends (...args: any) => any>(
-  callback: T,
-  delay: number,
-  options?: DebounceSettings
-): DebouncedFunc<T> {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useCallback(debounce(callback, delay, options), [
-    callback,
-    delay,
-    options,
-  ]);
-}

package.json

@@ -85,7 +85,8 @@
     "reselect": "4.1.8",
     "stacktrace-js": "2.0.2",
     "swiper": "8.3.2",
-    "typescript": "5.7.2"
+    "typescript": "5.7.2",
+    "use-debounce": "10.0.4"
   },
   "devDependencies": {
     "@babel/core": "7.27.1",

yarn.lock

@@ -7037,6 +7037,11 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
+use-debounce@10.0.4:
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.4.tgz#2135be498ad855416c4495cfd8e0e130bd33bb24"
+  integrity sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==
+
 use-sidecar@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.3.tgz#10e7fd897d130b896e2c546c63a5e8233d00efdb"