diff --git a/apps/client/src/features/search/components/label-filter-menu.tsx b/apps/client/src/features/search/components/label-filter-menu.tsx index c23924b0e..ec0a8fe0a 100644 --- a/apps/client/src/features/search/components/label-filter-menu.tsx +++ b/apps/client/src/features/search/components/label-filter-menu.tsx @@ -91,6 +91,7 @@ export function LabelFilterMenu({ return ( toggleLabel(label.id)} diff --git a/apps/client/src/features/search/components/search-spotlight-filters.tsx b/apps/client/src/features/search/components/search-spotlight-filters.tsx index 9899151e9..8a7886609 100644 --- a/apps/client/src/features/search/components/search-spotlight-filters.tsx +++ b/apps/client/src/features/search/components/search-spotlight-filters.tsx @@ -124,8 +124,17 @@ export function SearchSpotlightFilters({ color="blue" labelPosition="left" styles={{ - root: { display: "flex", alignItems: "center" }, - label: { paddingRight: "8px", fontSize: "13px", fontWeight: 500 }, + root: { + display: "flex", + alignItems: "center", + flexShrink: 0, + }, + label: { + whiteSpace: "nowrap", + paddingRight: "8px", + fontSize: "13px", + fontWeight: 500, + }, }} /> diff --git a/apps/client/src/features/search/components/search-spotlight.tsx b/apps/client/src/features/search/components/search-spotlight.tsx index 1707b9bed..410c7f859 100644 --- a/apps/client/src/features/search/components/search-spotlight.tsx +++ b/apps/client/src/features/search/components/search-spotlight.tsx @@ -1,6 +1,6 @@ import { Spotlight } from "@mantine/spotlight"; import { IconSearch, IconSparkles } from "@tabler/icons-react"; -import { Group, Button, VisuallyHidden } from "@mantine/core"; +import { Group, Button, VisuallyHidden, Text } from "@mantine/core"; import React, { useState, useMemo, useEffect, useCallback } from "react"; import { useDebouncedValue } from "@mantine/hooks"; import { useTranslation } from "react-i18next"; @@ -56,7 +56,10 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) { return params; }, [debouncedSearchQuery, filters]); - const { data: searchResults, isLoading } = useUnifiedSearch( + const { + data: searchResults, + isFetching, + } = useUnifiedSearch( searchParams, !isAiMode // Disable regular search when in AI mode ); @@ -177,7 +180,7 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) { ? query.length > 0 && !isAiLoading && !aiSearchResult ? t("No answer available") : "" - : query.length > 0 && !isLoading + : query.length > 0 && !isFetching ? resultItems.length === 0 ? t("No results found") : t("{{count}} results found", { count: resultItems.length }) @@ -208,11 +211,19 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) { {t("Start typing to search...")} )} - {query.length > 0 && !isLoading && resultItems.length === 0 && ( + {query.length > 0 && !isFetching && resultItems.length === 0 && ( {t("No results found...")} )} {resultItems.length > 0 && <>{resultItems}} + + {query.length > 0 && isFetching && ( + + + {t("Searching...")} + + + )} )} diff --git a/apps/client/src/features/search/hooks/use-unified-search.ts b/apps/client/src/features/search/hooks/use-unified-search.ts index 5d294f4bd..592e74fac 100644 --- a/apps/client/src/features/search/hooks/use-unified-search.ts +++ b/apps/client/src/features/search/hooks/use-unified-search.ts @@ -1,4 +1,4 @@ -import { useQuery, UseQueryResult } from "@tanstack/react-query"; +import { keepPreviousData, useQuery, UseQueryResult } from "@tanstack/react-query"; import { searchPage, searchAttachments, @@ -40,5 +40,6 @@ export function useUnifiedSearch( } }, enabled: !!params.query && enabled, + placeholderData: params.query.length > 0 ? keepPreviousData: undefined }); }