Hide an element until its DataSource is ready

Use the DataSource's loaded and inProgress properties to conditionally render content and disable controls while data is being fetched.

When a DataSource fetches from a slow endpoint, hide result content until data arrives and prevent the user from triggering another fetch while one is already running. Bind when to loaded and enabled to !inProgress to keep the UI consistent during the wait.

<App var.nonce="{0}">
  <DataSource
    id="fruits"
    url="/api/fruits?{nonce}"
    inProgressNotificationMessage="Loading fruits"
    when="{nonce > 0}"
    />

  <Button
    label="Run (takes about 3s)"
    enabled="{!fruits.inProgress}"
    onClick="{nonce++}"
  />

  <Text when="{fruits.loaded}">Fruits: {fruits.value.length} found</Text>
</App>
Show content only after the DataSource loads
<App var.nonce="{0}">
  <DataSource
    id="fruits"
    url="/api/fruits?{nonce}"
    inProgressNotificationMessage="Loading fruits"
    when="{nonce > 0}"
    />

  <Button
    label="Run (takes about 3s)"
    enabled="{!fruits.inProgress}"
    onClick="{nonce++}"
  />

  <Text when="{fruits.loaded}">Fruits: {fruits.value.length} found</Text>
</App>

Key points

loaded becomes true after the first successful fetch: Use when="{ds.loaded}" on any element to hide it until data is available. Before the first fetch completes, loaded is false.

inProgress is true while a fetch is in flight: Bind enabled="{!ds.inProgress}" on a button to prevent the user from triggering another fetch while one is already running. It toggles back to false when the response arrives.

inProgressNotificationMessage shows a toast automatically: Set a string and the framework displays a non-blocking toast during the fetch. No manual spinner wiring is needed for simple cases.

The when prop on DataSource controls whether it fetches at all: In the example, when="{nonce > 0}" prevents the DataSource from firing until the user clicks Run. This is different from hiding elements with when — it suppresses the HTTP request entirely.

See also