Way to delay mounting of component until data arrives?

General
1

We have some data that gets fetched from the database and assigned to an object in Page Data on Page Enter. This data then populates a repeater component “On Mounted”. However, unless we add a timer to wait for ~500msec before assigning the repeater data to our object in Page Data, the object in Page Data is undefined when our repeater component is mounted and so it displays as blank (and stays blank).

Is there a way other than “wait for some number of msecs” to make sure the component mounts with actual data? Or to have the component mount “blank” but then display the data once it’s arrived?

When we “set bind property value from the PageData Model” to refer to the object property, things work great (no need to set a wait). But sometimes we have to explicitly assign the repeater data model using a Codeless block in logic…

2

Hi @Alex_Klein

Loading data from the server takes some time and it doesn’t block the render process, therefore when you get the value from the page data in some component it might be not there yet.

1 Like
3

@Alex_Klein
In my experience, it is best to not assign the repeater data with the “On Mounted” logic. You have defined the repeater data logic as a property of Page Data, which is good. Then once your DB call returns, assign that data to that property of Page Data. The rendering should then be OK.

4

Yes, actually I’m seeing that just by using the data binding field for “Repeater Data Logic” (enter the name of the property in Page Data), we have no issues, the content appears once it’s available. But using the explicit block like this:

image
image1220×264 20.1 KB

causes a blank component (no content) because the On Mounted event happens before Page Data actually has the content. So I think our issue is solved :grinning:.

Perhaps setting the property in Page Data to an empty list first and then loading the content to replace/fill the list would work but I haven’t tested that.

5

What I mean is that I would set the API logic into your page or wherever, and then set the result of that as a property of “Page Data”. Then set the “Repeater Data Logic” as that same property of “Page Data”. Whenever the data call returns, the value of that property will change, and the “Repeater Data Logic” will detect that and re-render.

1 Like
6

Yes, that’s what we see. Thanks :+1:

1 Like