diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss index 74e95922b0..dc3e8eb66b 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss @@ -54,7 +54,7 @@ display: flex; justify-content: center; color: $primary; - font-size: 16px; + font-size: 15px; font-weight: 500; } } @@ -70,6 +70,17 @@ } } +.no-results { + text-align: center; + color: rgba($white, 0.5); + font-size: 15px; + + &:hover { + background-color: $panel-inner !important; + cursor: default !important; + } +} + @media (max-width: 992px) { .search-bar-container { width: 100%; diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx index 25558f341b..f69a167dbf 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx @@ -24,6 +24,7 @@ export default function SearchBar({ }: SearchBarProps) { const [searchTerm, setSearchTerm] = useState(""); const [foundTtsModels, setFoundTtsModels] = useState([]); + const [isLoading, setIsLoading] = useState(false); const maybeSearch = useCallback(async (value: string) => { setSearchTerm(value); @@ -35,6 +36,8 @@ export default function SearchBar({ search_term: value, }; + setIsLoading(true); + let response = await SearchTtsModels(request); if (response.success) { @@ -43,6 +46,8 @@ export default function SearchBar({ } else { setFoundTtsModels([]); } + + setIsLoading(false); }, [setFoundTtsModels] ); @@ -61,7 +66,13 @@ export default function SearchBar({ onBlur={onBlur} autoFocus={autoFocus} /> - {isFocused && } + {isFocused && ( + + )}