fix: display loading while calculating suggestions

Author: TheauW

packages/diracx-web-components/src/components/shared/SearchBar/SearchBar.tsx

@@ -102,6 +102,10 @@ export function SearchBar<T extends string>({
   const [tokenEquations, setTokenEquations] = useState<
     SearchBarTokenEquation[]
   >([]);
+
+  const [isSuggestionsLoading, setIsSuggestionsLoading] =
+    useState<boolean>(false);
+
   /** A ref to store the current filters to avoid reloading the token equations */
   const currentFilters = useRef<string | null>(null);
   /** A ref to store a boolean indicating if the component is updating from search */
@@ -162,27 +166,52 @@ export function SearchBar<T extends string>({
     [createSuggestions],
   );
 
+  // Load suggestions (with proper loading tracking and cancellation)
   useEffect(() => {
-    async function load() {
-      const params: CreateSuggestionsParams = {
-        previousToken,
-        previousEquation,
-        equationIndex: focusedTokenIndex?.equationIndex,
-      };
+    let cancelled = false;
+
+    const emptySuggestions: SearchBarSuggestions = {
+      items: [],
+      nature: [],
+      type: [],
+    };
 
-      if (usesCurrentInput && inputValue) {
-        params.currentInput = inputValue;
+    const run = async () => {
+      setIsSuggestionsLoading(true);
+      setSuggestions(emptySuggestions);
+
+      try {
+        const params: CreateSuggestionsParams = {
+          previousToken,
+          previousEquation,
+          equationIndex:
+            focusedTokenIndex?.equationIndex ?? tokenEquations.length - 1,
+        };
+        if (usesCurrentInput && inputValue) {
+          params.currentInput = inputValue;
+        }
+
+        const result = await createSuggestions(params);
+        if (!cancelled) {
+          setSuggestions(result);
+        }
+      } finally {
+        if (!cancelled) {
+          setIsSuggestionsLoading(false);
+        }
       }
+    };
 
-      const result = await createSuggestions(params);
-      setSuggestions(result);
-    }
-    load();
+    run();
+    return () => {
+      cancelled = true;
+    };
   }, [
     previousEquation,
     previousToken,
     createSuggestions,
     focusedTokenIndex,
+    tokenEquations.length,
     // If the current input is not used, we don't want to trigger the suggestions for each letter typed
     ...(usesCurrentInput ? [inputValue] : []),
   ]);
@@ -288,6 +317,7 @@ export function SearchBar<T extends string>({
       setTokenEquations={setTokenEquations}
       tokenEquations={tokenEquations}
       suggestions={suggestions}
+      suggestionsLoading={isSuggestionsLoading}
       focusedTokenIndex={focusedTokenIndex}
       setFocusedTokenIndex={setFocusedTokenIndex}
       allowKeyWordSearch={allowKeyWordSearch}

packages/diracx-web-components/src/components/shared/SearchBar/SearchField.tsx

@@ -24,18 +24,34 @@ import "dayjs/locale/en-gb"; // Import the locale for dayjs
 import { MyDateTimePicker } from "./DatePicker";
 
 interface SearchFieldProps {
+  /** The current input value in the search field */
   inputValue: string;
+  /** Function to update the input value */
   setInputValue: React.Dispatch<React.SetStateAction<string>>;
+
+  /** Reference to the input element */
   inputRef: React.RefObject<HTMLInputElement>;
+
+  /** The current token equations */
+  tokenEquations: SearchBarTokenEquation[];
+  /** Function to update the token equations */
   setTokenEquations: React.Dispatch<
     React.SetStateAction<SearchBarTokenEquation[]>
   >;
-  tokenEquations: SearchBarTokenEquation[];
+
+  /** The current suggestions for the search field */
   suggestions: SearchBarSuggestions;
+  /** Boolean indicating if suggestions are loading */
+  suggestionsLoading: boolean;
+
+  /** The current focused token index */
   focusedTokenIndex: EquationAndTokenIndex | null;
+  /** Function to update the focused token index */
   setFocusedTokenIndex: React.Dispatch<
     React.SetStateAction<EquationAndTokenIndex | null>
   >;
+
+  /** Boolean indicating if keyword search is allowed */
   allowKeyWordSearch?: boolean;
 }
 
@@ -46,6 +62,7 @@ export default function SearchField({
   setTokenEquations,
   tokenEquations,
   suggestions,
+  suggestionsLoading,
   focusedTokenIndex,
   setFocusedTokenIndex,
   allowKeyWordSearch = true,
@@ -289,6 +306,7 @@ export default function SearchField({
       onHighlightChange={(_e, option) => {
         optionSelectedRef.current = option !== null;
       }}
+      loading={suggestionsLoading}
       renderInput={(params) => (
         <TextField
           {...params}