Table is showing two loading icons

💬 App Building
1

  1. My goal: A table that shows a single loading graphic when its backing query is loading.

  2. Issue: I get two overlapping icons. If I enable "Hoist loading state" in the parent container, one of the two icons changes to a different style (?). I can't seem to get just one loading icon.

  3. Steps I've taken to troubleshoot: I've looked for documentation on loading state, table loading state, hoist loading state, but didn't find any. I saw some posts here but nothing fruitful.

  4. Additional info: (Cloud or Self-hosted, Screenshots)
    Self-hosted, Retool version 3.178.0

I'm sure I'm missing something trivial, but am not sure what to look for (since there doesn't seem to be documentation on this feature). My layout is basic: a container with a table inside it, and the table has a DB query as its data. When I run the query, I get two spinners. What should I look at to troubleshoot?

2

Hi @Mark_Slade,

I understand the issue you're facing. You might find the following steps helpful:

  1. Select the Container and disable “Hoist loading state.”
  2. Make sure your Table is referencing {{ queryName.data }} for its data source.
  3. Optionally, set the Table’s Show loading state to {{ queryName.isFetching }} for a better user experience.
  4. If your component is inside a Modal, ListView, or TabbedContainer, be sure to disable “Hoist loading state” there as well.

Hope this helps! Let me know if you run into any other issues.

1 Like
3

Hey @Mark_Slade,

I haven't been able to replicate this, as in I only get one spinner, both when using hoist loading state and when not using it.

The only way I was able to replicate this is when I add a {{ query4.isFetching }} to the "loading" setting of my container. However if I enable hoist loading state that goes away.

Do you see both spinners in all the below combinations?

  1. No hoisting and no loading settings
  2. No hoisting but loading settings in the container
  3. Hoisting and loading settings
  4. Hoisting without loading settings

If so, another useful thing would be to see what other components doe syour query updates:

image
image278×113 4.67 KB

That may be a way to troubleshoot as well.

1 Like
4

@MiguelOrtiz Thank you for digging in with me. I tried to capture a video, but with the 4MB upload limit it's hard to capture it well.

I've tested all combinations of hoisting (yes/no hoist) and loading (blank or getCollections.isFetching). In all cases I get double loading spinners. The only difference is:

  1. With hoist=yes OR loading=getCollections.isFetching, the two spinners have different look and feel (exhibit A)
  2. With hoist=no AND loading=blank, the two spinners are identical but slightly offset (exhibit B)

Maybe the styles give a hint where the duplicate is coming from? They're slightly offset from each other, but both roughly centered on the table.

I've confirmed that my query only updates one thing, collections.data (collections is my table). It is controlled BY another query, but even when I delete that relationship the loading behavior persists.

exhibit A
exhibit A204×148 3.34 KB

Exhibit B:

exhibit B
exhibit B204×148 1.87 KB

5

@Mark_Slade

Don't enable the hoist loading state,

image
image863×595 53.2 KB

It will directly check the query is getting data or not and give you the loading like this
image
image489×432 49.9 KB

6

Hi @Mark_Slade,

Did you sort this out already? If not, feel free to DM me an export of your app so I can take a look at your specific set up

Also, what version of Retool are you running (so we can ensure we're testing on the same version)?