I reuse an RG to show categories and on click subcategories. When going down or up to another category the page is first hidden and then animated in to create a navigation effect. Works fine.
But, for a tiny fraction of time, the old data in the RG is shown, creating a “flicker”. I have forced the update of RG using “Display list” but I still get this “flicker”.
I’m thinking this is because:
Bubble doesn’t actually update the RG content (even if I force it) until the RG is visible.
The RG does have the new data, and the flicker comes from the HTML div rerendering with new data, which is not done until it’s visible.
I’ve had similar issues before. The best I’ve managed so far is to place a shape / group over the offending element (i.e. the one that “flashes”). Make it the same color as the background and set it to only show when the repeating group “is loading” is true. This should cover up the element while it flashes.
I recall having a situation like this in a prior setup. I think I tried to fixed it by inserting a search in the middle (between the first two searches) that clears the repeating group with a search constraint that has zero results. I can’t recall whether it fixed it though. If it doesn’t, then sounds like it’s the html rendering issue you mention.
Have your visible and 2nd visible RGs to feed their data from the popupnRGs
In theory, this could speed up the searching as the data would be ready for when the invisible RGS becomes visible thus avoiding the flickering problem.
Thanks for the swift insights into this. To further complicate things:
Sorry for not mentioning this, but I wanted to go back to basics to see if I missed something not related to the things below. I was deep in the trenches!
This is a one-page app where I need to hide groups so that the page will not scroll if not needed by the one group visible.
I want to animate the exit and entry of the groups.
The content of each group resides in a RE.
So, taking all your advice I now do it like this:
I show a floating group to hide everything (aligned to top and bottom).
I hide the current group.
I show the group that I the user want to go to. This contains the RE with the RG that now will be populated.
I set a state (“working”) that the REs can update when the RG is loaded (I use the Environment Variables from BDK so I can reuse the same state for all REs).
When the RE’s RG is loaded, it sets the state to “done”.
On the main page, I capture when the state is “done” and:
Capturing the RG.IsLoading = no does not always seem to work. My interpretation is that it happens when the data is already in memory and Bubble does not need to load it. This leads to me not being able to know when the RG is populated.
So, since my app has a small amount of data (it’s a food shop) I decided to load all categories and products into a covered RG and use this as the database for fast updates of the RGs the user sees (as @cmarchan mentioned). This made it possible to just add some small delays to safely assume that the RG will have time be populated before I show it. (Of course, I would like to trigger on the actual readiness instead of these assumed reasonable set delays.)
A final change was also needed. Earlier I animated the new page (with an RG) sliding in. This I removed since that also affects when the page and RG are rendered since they are actually hidden just prior to being animated in. Instead I now simply fade the covering floating group out after a set short delay. I hope the client can accept this slight UX moderation.
A final note on if I should have the page content in different REs or on the main page. I put in REs to slim the main app page. But I still wanted the app page to control the UX, the REs being content slaves. Therefore I implemented a messaging system (using the BDK Environment Variables). This works fine, but if needing to wait for a lot of things to happen there’s a lot of messages flying around. So, going with the new solutions above made this much simpler.
Also, the Bubble editor is very slow even with the content in REs, so I might just have been as good off with all content on the main page.
