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.
Unleash · Jul 15, 2024 · aaf6602 · aaf6602
1 parent d32990e
commit aaf6602
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 46 deletions.
diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/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,39 +216,54 @@ export const CommandBar = () => {
             }
         });
 
-        return { allCommandBarLinks, selectedIndex };
+        return {
+            allCommandBarLinks,
+            selectedIndex,
+        };
     };
 
-    useKeyboardShortcut({ key: 'ArrowDown', preventDefault: true }, () => {
-        const itemsAndIndex = findCommandBarLinksAndSelectedIndex();
-        if (!itemsAndIndex) return;
-        const { allCommandBarLinks, selectedIndex } = itemsAndIndex;
+    useKeyboardShortcut(
+        {
+            key: 'ArrowDown',
+            preventDefault: true,
+        },
+        () => {
+            const itemsAndIndex = findCommandBarLinksAndSelectedIndex();
+            if (!itemsAndIndex) return;
+            const { allCommandBarLinks, selectedIndex } = itemsAndIndex;
 
-        const newIndex = selectedIndex + 1;
-        if (newIndex >= allCommandBarLinks.length) return;
+            const newIndex = selectedIndex + 1;
+            if (newIndex >= allCommandBarLinks.length) return;
 
-        (allCommandBarLinks[newIndex] as HTMLElement).focus();
-    });
-    useKeyboardShortcut({ key: 'ArrowUp', preventDefault: true }, () => {
-        const itemsAndIndex = findCommandBarLinksAndSelectedIndex();
-        if (!itemsAndIndex) return;
-        const { allCommandBarLinks, selectedIndex } = itemsAndIndex;
+            (allCommandBarLinks[newIndex] as HTMLElement).focus();
+        },
+    );
+    useKeyboardShortcut(
+        {
+            key: 'ArrowUp',
+            preventDefault: true,
+        },
+        () => {
+            const itemsAndIndex = findCommandBarLinksAndSelectedIndex();
+            if (!itemsAndIndex) return;
+            const { allCommandBarLinks, selectedIndex } = itemsAndIndex;
 
-        const newIndex = selectedIndex - 1;
+            const newIndex = selectedIndex - 1;
 
-        if (newIndex >= 0) {
-            (allCommandBarLinks[newIndex] as HTMLElement).focus();
-        } else {
-            const element = searchInputRef.current;
-            if (element) {
-                element.focus();
-                element.setSelectionRange(
-                    element.value.length,
-                    element.value.length,
-                );
+            if (newIndex >= 0) {
+                (allCommandBarLinks[newIndex] as HTMLElement).focus();
+            } else {
+                const element = searchInputRef.current;
+                if (element) {
+                    element.focus();
+                    element.setSelectionRange(
+                        element.value.length,
+                        element.value.length,
+                    );
+                }
             }
-        }
-    });
+        },
+    );
 
     useOnClickOutside([searchContainerRef], hideSuggestions);
     const onKeyDown = (event: React.KeyboardEvent) => {
@@ -346,24 +362,32 @@ export const CommandBar = () => {
                                 searchString={searchString}
                                 setSearchedFlagCount={setSearchedFlagCount}
                                 onClick={clearSearchValue}
+                                setSearchLoading={setSearchLoading}
                             />
                         )}
-                        <CommandResultGroup
-                            groupName={'Projects'}
-                            icon={'flag'}
-                            onClick={clearSearchValue}
-                            items={searchedProjects}
-                        />
-                        <CommandSearchPages
-                            items={searchedPages}
-                            onClick={clearSearchValue}
-                        />
                         <ConditionallyRender
-                            condition={hasNoResults}
+                            condition={!searchLoading}
                             show={
-                                <CommandBarFeedback
-                                    onSubmit={hideSuggestions}
-                                />
+                                <>
+                                    <CommandResultGroup
+                                        groupName={'Projects'}
+                                        icon={'flag'}
+                                        onClick={clearSearchValue}
+                                        items={searchedProjects}
+                                    />
+                                    <CommandSearchPages
+                                        items={searchedPages}
+                                        onClick={clearSearchValue}
+                                    />
+                                    <ConditionallyRender
+                                        condition={hasNoResults}
+                                        show={
+                                            <CommandBarFeedback
+                                                onSubmit={hideSuggestions}
+                                            />
+                                        }
+                                    />
+                                </>
                             }
                         />
                     </CommandResultsPaper>

diff --git a/frontend/src/component/commandBar/CommandSearchFeatures.tsx b/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 (
-        <CommandResultGroup
-            groupName={'Flags'}
-            icon={'flag'}
-            items={flags}
-            onClick={onClick}
+        <ConditionallyRender
+            condition={!loading}
+            show={
+                <CommandResultGroup
+                    groupName={'Flags'}
+                    icon={'flag'}
+                    items={flags}
+                    onClick={onClick}
+                />
+            }
         />
     );
 };