Loading indicator and disabled state does not work for Form triggering JS query

I've noticed that JS queries' isFetching property does not seem to work with forms' "Show loading indicator" and "Disable Form Submission" fields.

To reproduce, create a JS query with the following code:

return (async () => {
  
  const someOtherQuery = (t) => new Promise(resolve => setTimeout(resolve, t));
  
  await someOtherQuery(2000);
  
  // ...
  
  await someOtherQuery(3000);
  
  // ...
  
  await someOtherQuery(1000);
  
  // ...
  
  await someOtherQuery(5000);
  
})();

Using query.isFetching in the above mentioned form fields will not show a loading indication during as the query progresses.

This problem is also present when I trigger a similar JS query, that may .trigger() other resource queries.

Hi ZeeCoder, thanks for tracking this down for us! I have created a bug report with our Engineering team. We will update this thread when it gets resolved.

Hi @retool_team -- any updates on this one? I've got a project that depends on this feature, would love to bump the priority of this bug fix if possible! :slight_smile:

This just bit properly.
We have a js query, that trigger other queries as outlined above, and it's initiated by a form.
The form is to start a payment transfer.

Now, the form was set to be disabled, and to be in a "loading" state, while the js query was executing, however because of this bug it meant that the button was actually available for repeat submissions most of the time.

Which led to repeat submissions with the same payment being sent out...

The workaround for now is to create a global state variable, and manage that in the js query, and rely on this state in the form.

For instance, assuming the query is MyJsQuery, let's assume a global state of MyJsQueryState.
Then the query would be as follows:

return (async () => {
  MyJsQueryState.setValue({"loading": true});

  try {
    const someOtherQuery = (t) => new Promise(resolve => setTimeout(resolve, t));
  
    await someOtherQuery(2000);
  
    await someOtherQuery(2000);
  
    await someOtherQuery(2000);

  } catch (error) {
    // Making sure we catch any potential errors, otherwise our global state would not switch back
  }


  MyJsQueryState.setValue({"loading": false});
  
})();

Then in the form, you'd use "MyJsQueryState.value.loading" instead of "MyJsQuery.isFetching".

It's starting to become a lot less of an inconvenience and more of an issue now.

This property has been fixed! .isFetching is now accurate :blush: It may take a few days to land on our latest deploy, but you can now rely on its truthiness!

2 Likes

Confirmed to be working :clap: :clap: :clap:

Awesome, thank you for confirming! :blush: