isLoading doesn't work inside the component's main return

[buglessir]

I'm using "react-query": "^3.32.1" and trying to show a loading component while the isLoading is true:

return (
  <div className="container">
    <h1>{title}</h1>
    { fetchPostsQuery.isLoading && <Loading /> }
    { console.log(fetchPostsQuery.isLoading) }
  </div>
)

Regard to the above code, that <Loading /> component doesn't show but console.log shows false / true / false while the query is fetching... but with this scenario:

if (fetchPostsQuery.isLoading) return <Loading />

return (
  <div className="container">
    <h1>{title}</h1>
  </div>
)

loading is working and component switch between loading and the main return for the component's UI... but I've question, is there
any difference between isLoading inside the component's main return or outside that?
actually it's really weird... because useQuery is a custom hook and should update states any where!

Note, I don't fetch a unique key for this case, I've a drop down with 100 options and I set key like this: ['post', id], actually I'm aware isLoading is same for cached data with the unique keys...

Thanks

[TkDodo]

you asked the same on stackoverflow, and the answer here will be the same. It's also not react-query specific, because the value for isLoading is just a boolean. Have you tried hardcoding isLoading to true ? Most react-query codesandbox examples use an isLoading check, so you can find inspiration there.

Also, please don't open issues without a minimal codesandbox reproduction, thanks. Moving to discussion.

[buglessir]

Actually, I didn't ask yet in StackOverflow... today I found that question and remined me to my own problem with react-query and decided to open an issue...

[TkDodo]

Okay, there was a SO question with the exact same content which has been deleted 🤨. Coincidence?

anyhow, please reproduce in codesandbox

[TkDodo]

You still haven’t shown me a codesandbox reproduction where this occurs… 🤷‍♂️

[buglessir]

@TkDodo
I just checked my code again... I was using a svg file to show loading's animation but apparently React has some problem with showing svg in a conditional format 🤣
I replaced that with a gif file and solved 👌