How can I hide the old content of the table while it's refreshing?

App Building
1

Heya :wave:

I'm pretty new here in retool, so I'm still trying to figure out everything, so please be gentle :sweat_smile:

This is my setup
I have a table connected to a firebase resource, and the resource is being filtered by temporary state, and the temporary state is being changed by a navigation component.

Basically it's a sort of a vertical tab system that changes which event data to display.

The problem
Now when I click the navigation item, the table reloads, but while it's fetching the data of the new event, it still shows the data of the old event.

Question
Is there anyway to hide the old data while it's fetching the new data?
I've tried to set the data of the table to {{ querry.isFetching ? [{}] : querry.data }}, but it doesn't work.
I did manage to hide the entire table while it's fetching, but this creates a big jump in the UI /:

Do you have any other ideas? :pray:
Thanks a lot in advance :pray::cherry_blossom:

1 Like
2

I'd like to use similar functionality - not yet tried to implement so can't help, but following this to see how it's done.

3

Hello!

One thing you might try is calling yourQuery.reset() at the same time you trigger the query. Using reset() should clear the query data and empty the table as the query fetches new data:

Curious to hear from both of you if that works!