I’m loading external API data into repeating groups, which sometimes make a few seconds to load.
For better UX, I would like to hide the group, or show a gif animation, while the repeating group data is loading.
I figured out that I can natively add a condition to my reapeating group : “when repeating group is loading yes/no”.
But it seems to have no effect at all. So what is the purpose of that feature ?
I got an answer from bubble support : "If you have a large amount of data for the RG, the ‘is loading’ state might not work as expected because it is based on when the searches in the RG returns data and not necessarily when it is displayed on the page. "
Thanks for your response. I am pretty surprised (well, not really) that Bubble don’t fix this behaviour, because it’s clear it doesn’t do what is expected…
@andrew.mcdonagh Yep, no native solution yet, and I wouldn’t hold my breath for one either. This is less of a Bubble limitation and rather a common issue in web dev generally i.e. knowing when items have actually been “painted” in the browser (when a page is built with javascript, as is the case with Bubble). Bubble’s “is loading” state only returns true while it is fetching data from the database, and there can be a huge lag between the data being returned and the actual element being displayed on screen.
I’ve been working on a solution that may interest you
In my case, I have a button that when clicked shows a parent group containing my repeating group and other UI components.
In the bottom workflow, I have it do the following:
tell the parent group we are about to call an API from the workflow.
Call the API and set the state of the repeating group with the data
tell the parent group we have finished calling the API.
The Parent group has a Condition: When API being called, show a spinning wait GIF, when API not being called, show the repeating group.
This has significantly improved the UX, as the user sees the spinning GIF until the API calls have been completed and the Repeating Group has had it’s data set.
