Know exactly when your repeating group data is rendered on the client side.
Problem: When Bubble is loading data into repeating groups, there is a delay between the data being loaded and the data being rendered in the browser. There is no native way to know when the element is fully rendered on the client side. This is especially noticeable for large images and heavy database searches.
Solution: This plugin watches a specified text or image element and provides a “ready” event and a “is ready” state when the target element is fully rendered.
Chose a “target” element to watch (native Bubble text or image element) and give it an ID
Use the “setup” workflow to start watching the target element - when it is rendered the plugin’s “ready” state will become true, and an “is ready” event is also fired.
Use cases
Show a loading screen / popup until a repeating group is rendered.
Use in fixed cell repeating groups to show a loading screen / animation between pages (especially good for image galleries or heavy searches)
Check out the demo page for some examples! The examples illustrate the timing differences between when Bubbles “is loading” state implies an RG is ready, vs when the plugin says it’s actually rendered.
Note this is v1 and works well for the majority of use cases. However there are some improvements that I am continuing to work on. Do have a read of the docs which include some notes on limitations and planned features.
Please do share any and all feedback / queries here.
Hi - just testing the Plugin - idea is fuckin awesome - was looking for this for ages!!!
Question: Will it also “get through” if I have not a text in my nested RG2 - but text inside couple of Groups… I have quite a large 6 Level structure - is this causing a Problem? Not working as of now…
Thanks for checking out the plugin. I’ve had a look at the clip you sent of the issue and your setup should work. I tried recreating your setup but the plugin still worked for me. Could you consider the following:
Does the plugin work if you try a very basic example somewhere in your app? Just so we can rule out an issue with the installation.
Are all parent groups of your RG and the text element set to visible on load, including the text itself?
Can you ensure there are no other elements using the “R” or “text” IDs. You may need to use your browsers console window to search this. Or else just change the name to something unlikely to be in use already.
I’ve pushed a small update to the plugin which includes console logs which can help us debug further if the above does not resolve. Could you update the plugin and send a screenshot of the console window after your page has loaded?
Hi - re2: Is visible at load a must? Its designed ina way " when RG have >0 elements they are visible - but not always. Some Docs do not have all Levels only 2-3 or so…
Is this a problem? But when they load data they should be visible so?!
The plugin grabs the first cell of the RG, so as long as that does become visible. From your example it does look like all the cell rows are expanded so it should work.
Can you PM me the console logs please, and provide a link to your app (not the editor, just the run mode)
@robhblake Thank you so much for making this plugin! I just now purchased it and it solves a serious issue I had with one particular pesky report.
I have a “print version” of most of my app’s reports which loads a plain page sized to print nicely and automatically triggers the browser’s print dialog window shortly after page load. However, this one particular report sometimes (but not every time) takes too long to load compared to all the other reports, so this plugin allows me to wait just a touch longer when needed to trigger the print dialog.
You’re a genius. Money well spent on this plugin! I’ve been trying to solve this issue for over a week and I don’t know how I overlooked this forum post because I’ve been scouring the forums for tips.
It would be even more useful if it would be applicable to single elements (outside RG’s) and maybe also in “ext. scroll” - RG’s. I personally have an “endless scroll” - Feed and would like to display a Skeleton Loader until everything inside a cell is loaded - and as the plugin only watches the first cell it is not applicable at the moment. (Same for horizontally scrollable RG’s)
No critique just some ideas on how to improve further. Thanks for your effort.
PS: Does it work with Repeatable Elements inside RG’s? I am having trouble making it work…
Just confirming that reusable elements are no problem for the plugin - demo here. Perhaps give it a try with reference to the demo editor and if it still doesn’t work post some screenshots and we’ll figure it out.
Update! The plugin now lets you specify a target text or image element to watch that can be anywhere on the page (previously it had to be inside a repeating group). Demo.
This opens up some interesting options… I’m thinking loading / splash screens.
To access the new feature, please update the plugin in the plugins tab in the Bubble editor. There should not be any compatibility issues however if you notice any issues after the update please report it here (you can also roll back to the previous version as a temporary fix).
The next round of upgrades will focus on having finer control over which cells are targeted in a repeating group.
Thanks @chaostorm I can’t commit to an ETA at the moment but I expect to have this live before the end of June. It will take some time to test properly for all use cases but I may be able to roll out the upgrades piecemeal e.g. I should have it working for full RGs sooner than for extending RGs.
I’m delighted to hear the plugin helped you solve a particularly tricky issue!
Update! The plugin now lets you specify a target text or image element to watch that can be anywhere on the page (previously it had to be inside a repeating group).