Hide an element until its DataSource is ready
<Component name="Test" var.nonce="{0}">
<DataSource
id="fruits"
url="/api/fruits?{nonce}"
inProgressNotificationMessage="Loading fruits"
when="{nonce > 0}"
/>
<Button
label="Run"
onClick="{nonce++}"
/>
<Fragment when="{fruits.loaded}">
<Text>Fruits: {fruits.value.length} found</Text>
</Fragment>
</Component>
<Component name="Test" var.nonce="{0}">
<DataSource
id="fruits"
url="/api/fruits?{nonce}"
inProgressNotificationMessage="Loading fruits"
when="{nonce > 0}"
/>
<Button
label="Run"
onClick="{nonce++}"
/>
<Fragment when="{fruits.loaded}">
<Text>Fruits: {fruits.value.length} found</Text>
</Fragment>
</Component>