Populate a component on page load with data from a query that depends on other queries?

I'm working on an app that pulls information in from a Google Sheet on page load, and then performs certain checks and validations and then populates a List View where the user can perform some operations. There are a bunch of different tabs for working on different aspects of the data.

One of the tabs has a ListView with different fields populated from a Javascript Query, (horrifically :weary:) named "getInteractionResponseTypesToMatch2". This query relies on two other queries, so it's written as an async function that waits for the other two queries to finish. (Unless there is a better way to do that?)

I have this query set to run on page load.

The problem is, the UI components load immediately, while the query takes a brief amount of time to run (since it's waiting for those other two queries to run). So when I pull up the app, the ListView is completely blank. I made a button that manually runs the query; when I press it, the UI components are then populated with data.

I feel though that this isn't the best way - I'm assuming there's some way to design this so that the components will show the data as soon as it becomes available without need for a manual refresh? Or is there a way to trigger a refresh of the components when the query is done running? Or am I going about this all wrong?

Hi @MarkR

It sounds like you are seeing that the ListView is completely blank until you manually trigger the JS query in your screenshot? We should be able to get this set up so that you do not have to manually trigger a refresh.

To confirm, is the JS query in your screenshot being triggered onSuccess of an automatically triggered query or a query that runs on page load?