feat: show all results in the same time (#7590)

Previously, when the result box was loading, it returned projects and
menu items first. After the feature search response came back, it also
showed the features, but this made the component jump around too much.
Now, everything is shown when the feature result comes back, reducing
the jumping around.

frontend/src/component/commandBar/CommandBar.tsx

@@ -97,6 +97,7 @@ export const CommandBar = () => {
     const searchInputRef = useRef<HTMLInputElement>(null);
     const searchContainerRef = useRef<HTMLInputElement>(null);
     const [showSuggestions, setShowSuggestions] = useState(false);
+    const [searchLoading, setSearchLoading] = useState(false);
     const [searchString, setSearchString] = useState(undefined);
     const [searchedProjects, setSearchedProjects] = useState<
         CommandResultGroupItem[]
@@ -215,10 +216,18 @@ export const CommandBar = () => {
             }
         });
 
-        return { allCommandBarLinks, selectedIndex };
+        return {
+            allCommandBarLinks,
+            selectedIndex,
+        };
     };
 
-    useKeyboardShortcut({ key: 'ArrowDown', preventDefault: true }, () => {
+    useKeyboardShortcut(
+        {
+            key: 'ArrowDown',
+            preventDefault: true,
+        },
+        () => {
             const itemsAndIndex = findCommandBarLinksAndSelectedIndex();
             if (!itemsAndIndex) return;
             const { allCommandBarLinks, selectedIndex } = itemsAndIndex;
@@ -227,8 +236,14 @@ export const CommandBar = () => {
             if (newIndex >= allCommandBarLinks.length) return;
 
             (allCommandBarLinks[newIndex] as HTMLElement).focus();
-    });
-    useKeyboardShortcut({ key: 'ArrowUp', preventDefault: true }, () => {
+        },
+    );
+    useKeyboardShortcut(
+        {
+            key: 'ArrowUp',
+            preventDefault: true,
+        },
+        () => {
             const itemsAndIndex = findCommandBarLinksAndSelectedIndex();
             if (!itemsAndIndex) return;
             const { allCommandBarLinks, selectedIndex } = itemsAndIndex;
@@ -247,7 +262,8 @@ export const CommandBar = () => {
                     );
                 }
             }
-    });
+        },
+    );
 
     useOnClickOutside([searchContainerRef], hideSuggestions);
     const onKeyDown = (event: React.KeyboardEvent) => {
@@ -346,8 +362,13 @@ export const CommandBar = () => {
                                 searchString={searchString}
                                 setSearchedFlagCount={setSearchedFlagCount}
                                 onClick={clearSearchValue}
+                                setSearchLoading={setSearchLoading}
                             />
                         )}
+                        <ConditionallyRender
+                            condition={!searchLoading}
+                            show={
+                                <>
                                     <CommandResultGroup
                                         groupName={'Projects'}
                                         icon={'flag'}
@@ -366,6 +387,9 @@ export const CommandBar = () => {
                                             />
                                         }
                                     />
+                                </>
+                            }
+                        />
                     </CommandResultsPaper>
                 }
                 elseShow={

frontend/src/component/commandBar/CommandSearchFeatures.tsx

@@ -4,18 +4,21 @@ import {
 } from './RecentlyVisited/CommandResultGroup';
 import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
 import { useEffect } from 'react';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 interface ICommandBar {
     searchString: string;
     setSearchedFlagCount: (count: number) => void;
     onClick: () => void;
+    setSearchLoading: (loading: boolean) => void;
 }
 export const CommandSearchFeatures = ({
     searchString,
     setSearchedFlagCount,
     onClick,
+    setSearchLoading,
 }: ICommandBar) => {
-    const { features = [] } = useFeatureSearch(
+    const { features = [], loading } = useFeatureSearch(
         {
             query: searchString,
             limit: '3',
@@ -36,12 +39,21 @@ export const CommandSearchFeatures = ({
         setSearchedFlagCount(flags.length);
     }, [JSON.stringify(flags)]);
 
+    useEffect(() => {
+        setSearchLoading(loading);
+    }, [loading]);
+
     return (
+        <ConditionallyRender
+            condition={!loading}
+            show={
                 <CommandResultGroup
                     groupName={'Flags'}
                     icon={'flag'}
                     items={flags}
                     onClick={onClick}
                 />
+            }
+        />
     );
 };