Prevent flash of stale initialData when query changes (#7977)

* Prevent flash of stale initialData when query changes

* Make it more robust

Author: dem4ron

app/javascript/hooks/request-query.ts

@@ -5,6 +5,8 @@ import {
   type UseQueryOptions,
   keepPreviousData,
 } from '@tanstack/react-query'
+import { useRef } from 'react'
+import isEqual from 'lodash.isequal'
 import { camelizeKeys, decamelizeKeys } from 'humps'
 import { sendRequest } from '../utils/send-request'
 import { stringify } from 'qs'
@@ -44,13 +46,25 @@ export function usePaginatedRequestQuery<TResult = unknown, TError = unknown>(
   key: QueryKey,
   request: Request
 ): UseQueryResult<TResult, TError> {
+  const { query = {}, options = {} } = request
+
+  // we are storing the initial query on mount to detect when it changes.
+  const initialQueryRef = useRef(query)
+  // if the query changes (e.g. due to search or pagination), we omit initialData
+  // so tanstack query doesn't briefly show outdated initial data during the transition,
+  // and previously fetched data can take over.
+  // this avoids visual flashes where irrelevant initial data appears before new data loads.
+  const queryChanged = !isEqual(initialQueryRef.current, query)
+  const initialData = queryChanged ? undefined : options?.initialData
+
   return useQuery<TResult, TError>({
     queryKey: key,
     queryFn: handleFetch(request),
     refetchOnWindowFocus: false,
     refetchOnMount: false,
     placeholderData: keepPreviousData,
-    ...camelizeKeys(request.options),
+    ...camelizeKeys(options),
+    initialData: initialData as TResult | undefined,
   })
 }