only show loading indicator after 1 second of response loading (#54693)

Author: Ebonsignori

src/search/components/input/SearchOverlay.tsx

@@ -84,6 +84,7 @@ export function SearchOverlay({
   const [aiSearchError, setAISearchError] = useState<boolean>(false)
   const [aiReferences, setAIReferences] = useState<AIReference[]>([] as AIReference[])
   const [aiCouldNotAnswer, setAICouldNotAnswer] = useState<boolean>(false)
+  const [showSpinner, setShowSpinner] = useState(false)
 
   // Group all events between open / close of the overlay together
   const searchEventGroupId = useRef<string>('')
@@ -110,6 +111,26 @@ export function SearchOverlay({
   const { aiAutocompleteOptions, generalSearchResults, totalGeneralSearchResults } =
     autoCompleteOptions
 
+  // Whenever "searchLoading" changes, decide whether to show the spinner after 1s.
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>
+
+    // If it's the initial fetch, show the spinner immediately
+    if (!aiAutocompleteOptions.length && !generalSearchResults.length) {
+      return setShowSpinner(true)
+    }
+
+    if (searchLoading) {
+      timer = setTimeout(() => setShowSpinner(true), 1000)
+    } else {
+      setShowSpinner(false)
+    }
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [searchLoading, aiAutocompleteOptions.length, generalSearchResults.length])
+
   // Filter out any options that match the local query and replace them with a custom user query option that include isUserQuery: true
   const filteredAIOptions = aiAutocompleteOptions.filter(
     (option) => option.term !== urlSearchInputQuery,
@@ -225,10 +246,10 @@ export function SearchOverlay({
 
   // When loading, capture the last height of the suggestions list so we can use it for the loading div
   const previousSuggestionsListHeight = useMemo(() => {
-    if (suggestionsListHeightRef.current?.clientHeight) {
-      return suggestionsListHeightRef.current.clientHeight
+    if (generalSearchResults.length || aiAutocompleteOptions.length) {
+      return 7 * (generalSearchResults.length + aiAutocompleteOptions.length) + ''
     } else {
-      return '250' // Default height that looks very close to 5 suggestions (in px)
+      return '150' // Default height for just 2 suggestions
     }
   }, [searchLoading])
 
@@ -461,6 +482,9 @@ export function SearchOverlay({
           showDividers
           className={styles.suggestionsList}
           ref={suggestionsListHeightRef}
+          sx={{
+            minHeight: `${previousSuggestionsListHeight}px`,
+          }}
         >
           {/* Always show the AI Search UI error message when it is needed */}
           {aiSearchError && (
@@ -520,7 +544,7 @@ export function SearchOverlay({
             selectedIndex,
             listElementsRef,
             askAIState,
-            searchLoading,
+            showSpinner,
             previousSuggestionsListHeight,
           )}
         </ActionList>
@@ -533,6 +557,9 @@ export function SearchOverlay({
         showDividers
         className={styles.suggestionsList}
         ref={suggestionsListHeightRef}
+        sx={{
+          minHeight: `${previousSuggestionsListHeight}px`,
+        }}
       >
         {renderSearchGroups(
           t,
@@ -544,7 +571,7 @@ export function SearchOverlay({
           selectedIndex,
           listElementsRef,
           askAIState,
-          searchLoading,
+          showSpinner,
           previousSuggestionsListHeight,
         )}
       </ActionList>
@@ -687,7 +714,7 @@ function renderSearchGroups(
     aiCouldNotAnswer: boolean
     setAICouldNotAnswer: (value: boolean) => void
   },
-  searchLoading: boolean,
+  showSpinner: boolean,
   previousSuggestionsListHeight: number | string,
 ) {
   const groups = []
@@ -733,7 +760,7 @@ function renderSearchGroups(
     groups.push(<ActionList.Divider key="no-answer-divider" />)
   }
 
-  if (searchLoading) {
+  if (showSpinner) {
     groups.push(
       <Box
         key="loading"