From aaf66022af751c5964b5f2189e242b5c02ce48ef Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Mon, 15 Jul 2024 16:37:11 +0300
Subject: [PATCH] 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.
---
 .../src/component/commandBar/CommandBar.tsx   | 104 +++++++++++-------
 .../commandBar/CommandSearchFeatures.tsx      |  24 +++-
 2 files changed, 82 insertions(+), 46 deletions(-)

diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/frontend/src/component/commandBar/CommandBar.tsx
index 42de7f6b225d..25cb4889eaa6 100644
--- 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
index e6744e0ce1c7..cb009fa75585 100644
--- 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}
+                />
+            }
         />
     );
 };