Hide search results when the search keyword is an empty string

apps/app/src/features/search/client/components/SearchResultMenuItem.tsx

@@ -12,10 +12,13 @@ type Props = {
 export const SearchResultMenuItem = (props: Props): JSX.Element => {
   const { searchKeyword } = props;
 
+  const isEmptyKeyword = searchKeyword.trim() === '';
+
   const debouncedKeyword = useDebounce(searchKeyword, 500);
-  const { data: searchResult } = useSWRxSearch(debouncedKeyword, null, { limit: 10 });
 
-  if (searchResult == null || searchResult.data.length === 0) {
+  const { data: searchResult } = useSWRxSearch(isEmptyKeyword ? null : debouncedKeyword, null, { limit: 10 });
+
+  if (isEmptyKeyword || searchResult == null || searchResult.data.length === 0) {
     return <></>;
   }
 
@@ -34,7 +37,7 @@ export const SearchResultMenuItem = (props: Props): JSX.Element => {
           ))}
         </tbody>
       </table>
-      <div className="border-top mt-2 mb-2" />
+      <div className="border-top mb-2" />
     </>
   );
 };