arangodb
diff --git a/‎CHANGELOG
Lines changed: 2 additions & 0 deletions b/‎CHANGELOG
Lines changed: 2 additions & 0 deletions
diff --git a/‎js/apps/system/_admin/aardvark/APP/react/src/views/graphV2/viewGraph/graphSettings/ParameterNodeStart.tsx
Lines changed: 6 additions & 1 deletion b/‎js/apps/system/_admin/aardvark/APP/react/src/views/graphV2/viewGraph/graphSettings/ParameterNodeStart.tsx
Lines changed: 6 additions & 1 deletion
diff --git a/‎js/apps/system/_admin/aardvark/APP/react/src/views/graphV2/viewGraph/graphSettings/useNodeStartOptions.tsx
Lines changed: 17 additions & 4 deletions b/‎js/apps/system/_admin/aardvark/APP/react/src/views/graphV2/viewGraph/graphSettings/useNodeStartOptions.tsx
Lines changed: 17 additions & 4 deletions
@@ -1,6 +1,8 @@
 devel
 -----
 
+* FE-575: adds debounce and loading state for node start search.
+
 * Fix BTS-2086: Fixes missing reschedule of license checks on single-server
   instances.
 
 
@@ -10,14 +10,19 @@ const ParameterNodeStart = () => {
   const [inputValue, setInputValue] = useState<string>("");
 
   const { values, onRemoveValue, onAddValue } = useSetupNodeStartValues();
-  const { options } = useNodeStartOptions({ graphName, inputValue, values });
+  const { options, isLoading: isLoadingOptions } = useNodeStartOptions({
+    graphName,
+    inputValue,
+    values
+  });
 
   return (
     <>
       <FormLabel htmlFor="nodeStart">Start node</FormLabel>
       <MultiSelect
         noOptionsMessage={() => "No nodes found"}
         isClearable={false}
+        isLoading={isLoadingOptions}
         styles={{
           container: baseStyles => {
             return { width: "240px", ...baseStyles };
 
@@ -51,6 +51,14 @@ const fetchOptions = async ({
   });
 };
 
+const useDebouncedValue = (value: string, delay: number) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timeout = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timeout);
+  }, [value, delay]);
+  return debouncedValue;
+};
 /**
  * Takes the graph name and
  * the input entered by the user,
@@ -70,6 +78,8 @@ export const useNodeStartOptions = ({
   inputValue: string;
   values: OptionType[];
 }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const debouncedInputValue = useDebouncedValue(inputValue, 500);
   const [vertexOptions, setVertexOptions] = useState<
     OptionType[] | undefined
   >();
@@ -90,18 +100,21 @@ export const useNodeStartOptions = ({
     };
     fetchGraphVertexCollection();
   }, [graphName]);
-
+  useEffect(() => {
+    setIsLoading(true);
+  }, [inputValue]);
   // loads options based on inputValue
   useEffect(() => {
     const loadVertexOptions = async () => {
       const vertexOptions = await fetchOptions({
-        inputValue,
+        inputValue: debouncedInputValue,
         collectionOptions,
         values
       });
       setVertexOptions(vertexOptions);
+      setIsLoading(false);
     };
     loadVertexOptions();
-  }, [inputValue, collectionOptions, values]);
-  return { options: vertexOptions };
+  }, [debouncedInputValue, collectionOptions, values]);
+  return { options: vertexOptions, isLoading };
 };