Infinite "Searching by meaning..." loading state on back navigation and sequential searches fix

[Takitxt]

Addressed Issues:

Fixes #1398 : Infinite "Searching by meaning..." loading state on back navigation and sequential searches on searching multiple times.

Problem Statement:

• The application enters an unrecoverable, infinite loading state displaying the "Searching by meaning...".

• When we search different things more than 3 or 4 times and go back or search again, at one point it crashes o r gets stuck.

Screenshots/Recordings:

PictoPy Before:

624449139-02e06284-a035-4945-80a3-9f7525ad713e.mov

PictoPy After:

Screen.Recording.2026-08-01.at.9.38.42.AM.mov

Additional Notes:

Number of Files Changed: 1
File Name: frontend/src/pages/searchResults/searchResults.tsx

Problems that are Fixed:

Total Number of bugs present: 2

Bug 1: A stale search re-opens the loader after a newer search already closed it

In auto mode, the query function falls back to semantic search and dispatches a loading message:

if (semAvailable) {
  dispatch(showLoader('Searching by meaning...'));
  const semResponse = await semanticSearchImages({ query });
}

• This dispatch call has no awareness of whether the search it belongs to is still the one the user cares about. If you search "human" and then immediately search "motorcycle" before "human" resolves, both run as independent async chains. If "human"'s chain is slightly delayed, it can reach that dispatch(showLoader(...)) call after "motorcycle" has already finished and hidden the loader. Nothing was listening for that — only the currently active search's success/error path calls hideLoader() — so the stale dispatch from the abandoned "human" search leaves the loader stuck on.

Fix: :
Added a generation counter (searchGenerationRef) that increments synchronously during render whenever query/mode actually changes (not inside a useEffect, since effects run after render and would leave a timing gap). Each search captures its own generation number when it starts (myGeneration). Before dispatching showLoader, it checks whether its generation is still current — if a newer search has started, the numbers won't match and the dispatch is skipped. This is a plain synchronous comparison, so it can't itself race.

// react-query only aborts a superseded query's signal from inside a
// useEffect (post-commit), so there's a brief window right after a new
// search starts where an older, still-running queryFn can reach its
// manual dispatch below with signal.aborted still false. This ref is
// updated synchronously during render -- no such window -- so it always
// reflects the truly current search, even before that effect runs.
const searchKey = `${query}::${mode}`;
const searchKeyRef = useRef<string | null>(null);
const searchGenerationRef = useRef(0);
if (searchKeyRef.current !== searchKey) {
  searchKeyRef.current = searchKey;
  searchGenerationRef.current += 1;
}
const currentSearchGeneration = searchGenerationRef.current;

Bug 2: Repeating an identical search re-fetches silently, and the loader-hiding effect never re-runs:

• This one only shows up when a search is repeated exactly (e.g. "human" → "motorcycle" → "human" again). React Query caches by query key, so the third search hits the same cache entry as the first: it instantly returns the cached results, then quietly refetches in the background to revalidate.

• The useEffect responsible for hiding the loader only re-runs when data, isSuccess, isError, or isLoading change. During that background refetch:

1. isLoading stays false the whole time — it's only true when there's no cached data at all.
2. If the refetched results are identical to the cached ones (likely, since the underlying library hasn't changed), React Query reuses the same data reference rather than creating a new one.

• So none of the effect's dependencies change, the effect never re-runs, and hideLoader() is never called — even though Bug 1's showLoader dispatch already turned it back on for that background refetch.

Fix::
Added isFetching to the effect's dependency array. Unlike isLoading, isFetching is true for the full duration of any fetch — including silent background refetches — and reliably flips back to false when it completes, regardless of whether the data reference changed. This guarantees the effect re-runs and hides the loader once the refetch finishes.

const {
   data,
   isLoading,
   isFetching,
   isSuccess,
   isError,
   errorMessage,
   error,
 } = usePictoQuery({
   queryKey: ['search-results', query, mode],
   queryFn: async (): Promise<SearchQueryResult> => {
     const myGeneration = currentSearchGeneration;
     if (mode === 'semantic') {

Improtant:

- I have tested it for multiple searches multiple times, but on your side please do check it, if it is generating a bug or not.

AI Usage Disclosure:

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.

Check one of the checkboxes below:

• This PR does not contain AI-generated code at all.
• [ x ] This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

I have used the following AI models and tools: Claude Sonnet - 5

Checklist

• [ x ] My PR addresses a single issue, fixes a single bug or makes a single improvement.
• [ x ] My code follows the project's code style and conventions
• [ x ] If applicable, I have made corresponding changes or additions to the documentation
• [ x ] If applicable, I have made corresponding changes or additions to tests
• [ x ] My changes generate no new warnings or errors
• [ x ] I have joined the Discord server and I will share a link to this PR with the project maintainers there
• [ x ] I have read the Contribution Guidelines
• [ x ] Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
• [ x ] I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

• Bug Fixes
  • Improved search result loading behavior when multiple searches are started in quick succession.
  • Prevented outdated searches from displaying incorrect loading states.
  • Ensured image results update reliably as fetching progresses.

[coderabbitai]

Walkthrough

The search results page tracks active query generations. Image searches ignore loader updates from superseded searches. The image-result effect also responds to isFetching changes.

Changes

Search generation tracking

Layer / File(s)	Summary
Generation-gated image search frontend/src/pages/SearchResults/SearchResults.tsx	The component tracks query and mode changes with useRef. Image searches dispatch the semantic-search loader only when their generation is current. The image-result effect includes isFetching in its dependencies.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested labels: TypeScript/JavaScript

Suggested reviewers: rohan-pandeyy

Poem

A rabbit checks each search in flight,
Stale loaders vanish from sight.
New queries hop to the front,
Old ones no longer haunt.
The spinner now knows when to stop.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes directly address issue #1398 by preventing stale searches from reopening the loader and clearing it after refetches.
Out of Scope Changes check	✅ Passed	The changes remain focused on search-generation tracking and semantic-search loader cleanup described in issue #1398.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main fix for the infinite loading state during back navigation and sequential searches.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Takitxt]

@rohan-pandeyy can you please review this PR.