Oceans of
Andromeda

 1import { useEffect } from 'react'
 2import dynamic from 'next/dynamic'
 3import { useAtomValue, useUpdateAtom } from 'jotai/utils'
 4import {
 5  isSearchSuggestionsChunkLoadedAtom,
 6  recommendedSearchesAtom,
 7  setIsSearchSuggestionsChunkLoadedAtom,
 8  suggestedItemsAtom,
 9} from 'store/search.atom'
10
11const SearchSuggestions = dynamic(() => import('toro/components/SearchWidget'), {
12  ssr: false,
13})
14
15interface Props {
16  onClose: () => void
17  styleVariant: string
18  styles: any
19  isSearchActive: boolean
20}
21
22function SearchSuggestionsWrapper({ isSearchActive, ...props }: Props) {
23  const recommendedSearches = useAtomValue(recommendedSearchesAtom)
24  const products = useAtomValue(suggestedItemsAtom)
25  const isLoaded = useAtomValue(isSearchSuggestionsChunkLoadedAtom)
26  
27  useEffect(() => {
28    if (isLoaded) return
29
30    if (recommendedSearches.length || products.length || isSearchActive) {
31      setSuggestionsChunkLoading(true)
32    }
33  }, [recommendedSearches.length, products.length, isSearchActive])
34
35  return isLoaded ? <SearchSuggestions {...props} /> : null
36}