refactor: simplify loading state management in DocumentMentionPicker

- Consolidated loading state checks to improve clarity and performance.
- Updated logic to hide the results popup when no documents are available, regardless of fetch state.
- Removed redundant variables related to fetching states, streamlining the component's functionality.
This commit is contained in:
Anish Sarkar 2026-01-18 22:04:28 +05:30
parent 8654c98afe
commit b158ddd083

View file

@ -169,11 +169,7 @@ export const DocumentMentionPicker = forwardRef<
* - placeholderData: keepPreviousData maintains UI stability during fetches * - placeholderData: keepPreviousData maintains UI stability during fetches
* - Only triggers server-side search when isSearchValid (2+ characters) * - Only triggers server-side search when isSearchValid (2+ characters)
*/ */
const { const { data: titleSearchResults, isLoading: isTitleSearchLoading } = useQuery({
data: titleSearchResults,
isLoading: isTitleSearchLoading,
isFetching: isTitleSearchFetching,
} = useQuery({
queryKey: ["document-titles", titleSearchParams], queryKey: ["document-titles", titleSearchParams],
queryFn: ({ signal }) => queryFn: ({ signal }) =>
documentsApiService.searchDocumentTitles({ queryParams: titleSearchParams }, signal), documentsApiService.searchDocumentTitles({ queryParams: titleSearchParams }, signal),
@ -187,11 +183,7 @@ export const DocumentMentionPicker = forwardRef<
* - Uses AbortSignal for automatic request cancellation * - Uses AbortSignal for automatic request cancellation
* - placeholderData: keepPreviousData prevents UI flicker during refetches * - placeholderData: keepPreviousData prevents UI flicker during refetches
*/ */
const { const { data: surfsenseDocs, isLoading: isSurfsenseDocsLoading } = useQuery({
data: surfsenseDocs,
isLoading: isSurfsenseDocsLoading,
isFetching: isSurfsenseDocsFetching,
} = useQuery({
queryKey: ["surfsense-docs-mention", debouncedSearch, isSearchValid], queryKey: ["surfsense-docs-mention", debouncedSearch, isSearchValid],
queryFn: ({ signal }) => queryFn: ({ signal }) =>
documentsApiService.getSurfsenseDocs({ queryParams: surfsenseDocsQueryParams }, signal), documentsApiService.getSurfsenseDocs({ queryParams: surfsenseDocsQueryParams }, signal),
@ -289,18 +281,12 @@ export const DocumentMentionPicker = forwardRef<
// Select data source based on search length: client-filtered for single char, server results for 2+ // Select data source based on search length: client-filtered for single char, server results for 2+
const actualDocuments = isSingleCharSearch ? (clientFilteredDocs ?? []) : accumulatedDocuments; const actualDocuments = isSingleCharSearch ? (clientFilteredDocs ?? []) : accumulatedDocuments;
// Only show loading spinner on initial load (no documents yet), not during subsequent searches
const actualLoading = const actualLoading =
(isTitleSearchLoading || isSurfsenseDocsLoading) && currentPage === 0 && !isSingleCharSearch; (isTitleSearchLoading || isSurfsenseDocsLoading) &&
const isFetchingResults = currentPage === 0 &&
(isTitleSearchFetching || isSurfsenseDocsFetching) && !isSingleCharSearch; !isSingleCharSearch &&
accumulatedDocuments.length === 0;
// Determine if search yields no results (hide popup but keep mention mode active for recovery)
const hasNoSearchResults =
(isSearchValid || isSingleCharSearch) &&
!actualLoading &&
!isFetchingResults &&
actualDocuments.length === 0;
// Partition documents by type for grouped UI rendering // Partition documents by type for grouped UI rendering
const surfsenseDocsList = useMemo( const surfsenseDocsList = useMemo(
() => actualDocuments.filter((doc) => doc.document_type === "SURFSENSE_DOCS"), () => actualDocuments.filter((doc) => doc.document_type === "SURFSENSE_DOCS"),
@ -429,8 +415,9 @@ export const DocumentMentionPicker = forwardRef<
[selectableDocuments, highlightedIndex, handleSelectDocument, onDone] [selectableDocuments, highlightedIndex, handleSelectDocument, onDone]
); );
// Return null when no results; mention mode remains active for result recovery on backspace // Hide popup when there are no documents to display (regardless of fetch state)
if (hasNoSearchResults) { // Search continues in background; popup reappears when results arrive
if (!actualLoading && actualDocuments.length === 0) {
return null; return null;
} }