scroll restoration doesn't work when using IsFetching

[github-changhyeon]

When I use isLoading like pseudo code below, scroll restoration works well when I go to the detail page and return. (using the brower back button)

// works well example (pseudo code)

  const { isLoading, data } = useQuery(['getList'], () => getListData(url));

  if (isLoading) return <Loading />;

  return (
    <>
      {data.map((element, idx) => (
        <ListItem
          key={idx}
          item={element}
          onClick={() => {
            // move to item's detail page
          }}
        />
      ))}
    </>
  );

But, When I use isFetching instead, scroll restoration doesn't work at all.

// doesn't work example (pseudo code)

  const { isFetching, data } = useQuery(['getList'], () => getListData(url));

  if (isFetching) return <Loading />;

  return (
    <>
      {data.map((element, idx) => (
        <ListItem
          key={idx}
          item={element}
          onClick={() => {
            // move to item's detail page
          }}
        />
      ))}
    </>
  );

I already read some answers like #2493 (comment), and #1977 (comment), so I understand that react-query doesn't do anything specific for scroll restoration.

But, I want to show "loading component" instead of cached data When the query is fetching in the background, becuase I guess it confuses the user if the data is updated on the screen while user is watching.
However, I also want to provide scroll restoration. Is there any good way?

Thank you for your time. :)

[TkDodo]

I don't think there is. if you unmount your component during every background refetch, the scroll position is gone. it also means that every time you focus the window (unless you turn that feature off or customize staleTime), your component would unmount and a loading spinner is shown.

a better ux would likely be to show a background loading spinner in addition to the stale data, and maybe a success toast after the data has been fetched to show the users that they are now seeing new data. but the stale-while-revalidate principle react-query is built upon usually leads to a better ux if you keep showing stale data instead of a loading spinner while background updates are happening. otherwise, you're not really taking advantage of the cache.

[github-changhyeon]

Thank you for your answer.
As you said, it seems that I need to find the way to take advantage of the cache. :)