Query loading state

💬 App Building
1

I have the following situation: I have a query that's responsible for loading the main data for my page. This query is pretty heavy, so it takes some time, and I want to show a loading spinner for it. The data is then shown in a table and when that table gets updated by the user, I want the query to run again, in order to make sure the frontend is still in sync with the backend. The only difference is that for these runs, I don't want to show the loading spinner, since loading the data can take some time and I want to allow the user to still use the UI without having to wait 10+ seconds after every edit.

My thought was to show the loading spinner only if there's no data yet, so basically !myQuery.data, but somehow this doesn't work. Is there a way to do this better? Am I missing something?

2

Hey @Janosch_Herrmann,

I actually haven't tried the !myQuery.data option before, but that would have been most likely my first approach.

The second thing I would have done is set up a loadingSpinner variable that would be true by default and you can set your table/container loading stage linked to that variable, AND set up a success event for your query that simply changes the variable to false.

You can then use the same variable for other actions that users take that you DO want for the spinner to reappear.

3

Ah yes, that's actually a smart solution. I ended up basically duplicating the query, where one instance only gets the data the first time, and the other is used to update a variable that holds the data, but your solution is more elegant for sure :smiley:

1 Like