implement real time suggestion

frontend/jest.setup.ts

@@ -18,6 +18,7 @@ beforeEach(() => {
   })
 })
 jest.mock('@algolia/autocomplete-theme-classic', () => ({}))
+import React from 'react'
 
 global.React = React
 global.TextEncoder = TextEncoder

frontend/package.json

@@ -18,6 +18,9 @@
     "watch": "jest --watch"
   },
   "dependencies": {
+    "@algolia/autocomplete-js": "^1.17.8",
+    "@algolia/autocomplete-plugin-query-suggestions": "^1.17.8",
+    "@algolia/autocomplete-theme-classic": "^1.17.8",
     "@fortawesome/fontawesome-svg-core": "^6.7.0",
     "@fortawesome/free-brands-svg-icons": "^6.7.0",
     "@fortawesome/free-regular-svg-icons": "^6.7.0",
@@ -45,9 +48,6 @@
     "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
-    "@algolia/autocomplete-js": "^1.17.8",
-    "@algolia/autocomplete-plugin-query-suggestions": "^1.17.8",
-    "@algolia/autocomplete-theme-classic": "^1.17.8",
     "@eslint/js": "^9.15.0",
     "@swc/core": "^1.10.4",
     "@swc/jest": "^0.2.37",

frontend/src/components/AutoSuggestion.tsx

@@ -5,8 +5,8 @@ import { debounce } from 'lodash'
 import React from 'react'
 import { useEffect, useRef } from 'react'
 import { NEST_ENV } from 'utils/credentials'
-import { client } from '../lib/algoliaClient'
-import './Autosuggestion.css'
+import { client } from 'lib/algoliaClient'
+import 'components/Autosuggestion.css'
 
 interface SearchProps {
   onChange: (query: string) => void
@@ -45,7 +45,6 @@ const Autocomplete = React.memo(
           container: containerRef.current,
           placeholder,
           autoFocus: true,
-          openOnFocus: true,
           insights: true,
           plugins: [querySuggestionsPlugin],
           initialState: { query: initialValue },

frontend/src/components/Search.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import Autocomplete from './AutoSuggestion'
+import Autocomplete from 'components/AutoSuggestion'
 
 interface SearchProps {
   onSearch: (query: string) => void

frontend/src/components/SearchPageLayout.tsx

@@ -40,11 +40,6 @@ const SearchPageLayout = ({
 
   return (
     <div className="mt-16 flex min-h-screen w-full flex-col items-center justify-normal p-5 text-text">
-      {!isLoaded && !isSearchBarReady && (
-        <div className="bg-background/50 fixed inset-0 flex items-center justify-center">
-          <LoadingSpinner imageUrl={loadingImageUrl} />
-        </div>
-      )}
       <div className="w-full max-w-lg">
         <SearchBar
           indexName={indexName}
@@ -54,23 +49,25 @@ const SearchPageLayout = ({
           onReady={handleSearchBarReady}
         />
       </div>
-      {!isLoaded ? (
+      {!isSearchBarReady || !isLoaded ? (
         <div className="mt-20 flex h-64 w-full items-center justify-center">
           <LoadingSpinner imageUrl={loadingImageUrl} />
         </div>
       ) : (
-        <div>
-          {totalPages === 0 && <div className="text bg:text-white m-4 text-xl">{empty}</div>}
-          {children}
-        </div>
-      )}
-      {totalPages > 1 && (
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          onPageChange={onPageChange}
-          isLoaded={isLoaded}
-        />
+        <>
+          <div>
+            {totalPages === 0 && <div className="text bg:text-white m-4 text-xl">{empty}</div>}
+            {children}
+          </div>
+          {totalPages > 1 && (
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={onPageChange}
+              isLoaded={isLoaded}
+            />
+          )}
+        </>
       )}
     </div>
   )