#UseQueries make Semantic Modal take a while to display

12 messages · Page 1 of 1 (latest)

quaint fox
#

Hello everyone! In our project, we presently utilize React-Query and Semantic UI, but I have a problem where if I use UseQueries in Modal, it takes a while to display whether my data has already been retrieved.
Could you guys please help me to solve my issue, thanks in advance.

#

UseQueries make Semantic Modal take a while to display

woeful trail
#

Hi 👋

If you can provide a sandbox we can take a look for you but this doesn't sound like a TanStack Query issue

quaint fox
#

Hi Louis, thanks for response.
Let me show more details
i have a semantic UI Modal, if i use UseEffect call api directly to retrieve data, the modal will show up immediately after i trigger a button. on the other hand, If i useQueries instead, my Modal will take a while to open.

#

useQueries or useEffect ( to make an api call) is inside that modal

woeful trail
#

I wouldn't be able to advise without seeing the code I'm afraid. If you can provide a sandbox we can take a look for you 🙂

quaint fox
#

because our project setup is quite a lot, so i just can give you a snapshot.
in the attachments, as i said before, if i replace useTopicsData with an UseEffect to get data directly, my Modal will show immediately.

image.png image.png
maiden lodge
#

Does the const queries reference ever change? It looks like the memoized isLoading maybe never updates?

quaint fox
#

yes it does, but isloading is doesn't matter, i have removed it and the result like a said above. The modal is stuck at queries first.

thorn grotto
#

Could it be the cloneDeep? You can try using lazy initialisation variation of useState, i.e. useState(() => initialState)

hollow grove
#

if i replace useTopicsData with an UseEffect to get data directly, my Modal will show immediately.

Can you show the useEffect that would show the modal immediately? And also the code that triggers the modal to be shown?

quaint fox
#

Hi Julien, i have tried to clear site data, and the modal show up immediately. May be the issue come from how react-query load cached data from indexDB ( i used custom persister by the way).