Page loading animation for list

Hello Guys,
I am looking for the event that I might listen to that signals when all my page (screen) is fully loaded.
I have multiple lists, component with dynamic visibility, pictures and it all takes around 2-3 seconds too load which is fine how I want to show it only when it is done to spare user seeing confusing components.
Any way to do it?
I read your articles on the spinner in buttons, loading animations etc but it does not really solve my issue here…

@Mevi sorry to flag you but I saw that you are pretty fluent in the subject in some videos… any ideas?

You can flag me no problem, I’m just sometimes slow to answer :slight_smile:

There’s no “event” for when all the components are rendered and data is ready I’m afraid. I would use loading states and visibility bindings for components (e.g. only when data variable is not empty show list(s)). Basically the only other option is to e.g. wait for data to be loaded and then… delay for a second or two? Not the most optimal solution, but might trick the eye. However, if the user has a super slow device, they might see the loading state still, and there’s no real way to predict that.

Thanks! I got to the same conclusion.
I set up custom loading animation with visibility tied to boolean page variable which is initially true but get set to false when data variable is set. not perfect but solves 95% of the problem!