Using react-query in new project and having small issue.
Requirement is to show loading spinner on empty page before data is loaded and than after user fetches new results with different query to show spinner above previous results.

First case is pretty easy and well documented:

  const { isLoading, error, data } = useQuery(["list", query], () =>

    fetch(`https://api/list/${query}`)

  );



  if (isLoading) return <p>Loading...</p>;



  return <div>{data.map((item) => <ListItem key={item.id} item={item}/></div>

But, cant figure out second case - because, after query changes react-query doing fetch of new results and data from useQuery is empty as result I get default empty array and in that case falls to that condition - if (isLoading && !data.length )

  const { isLoading, error, data=[] } = useQuery(["list", query], () =>

    fetch(`https://api/list/${query}`)

  );



  if (isLoading && !data.length ) return <p>Loading...</p>;



  return <div>

    {data.map((item) => <ListItem key={item.id} item={item}/>

    {isLoading && <Spinner/>}

  </div>