Forum Academy Marketplace Showcase Pricing Features

[PLUGIN] Render Checker by SuperStack - aka "Is my RG finished loading?!"

image

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.

:sparkles: Demo :gear: Editor :books: Docs :computer: Plugin page

Setup

  1. Give your repeating group an ID
  2. Chose a “target” element to watch (native Bubble text or image element) and give it an ID
  3. 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.

All the best
Rob :slightly_smiling_face:

10 Likes

Handy!!! @robhblake :+1:

1 Like

Thanks @cmarchan! Waiting for RGs to load often results in messy UX - I think this is the only robust solution. Let me know if any feedback :slightly_smiling_face:

that’s great ! thanks

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…

Hey @lars1

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:

  1. 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.

  2. Are all parent groups of your RG and the text element set to visible on load, including the text itself?

  3. 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?

All the best
Rob.

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)

Thanks
Rob

can you send me q quick loom how to do that? thx

I overlooked that. Great job!

1 Like

@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.

1 Like

Hey @BrianHenderson, thanks so much for the message :slight_smile: I’m delighted to hear the plugin helped you solve a particularly tricky issue!

Bests
Rob.

The plugin is really nice & really needed.

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…

Hi @maze thanks for your feedback! Yes I totally agree those are two areas I am focussing on next i.e.

  1. Check for an element rendering outside an RG; and
  2. Ability to specify which cell in the RG to watch / wait for all cells to render

Regarding the reusable element, I will test this out and get back to you.

Cheers
Rob

1 Like

Hey @maze

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.

Next up - targeting elements outside of an RG!

Cheers
Rob.

1 Like

:sparkles: 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.

All the best
Rob.

2 Likes

@robhblake I’ve just purchased the plugin, thanks for making this.

Is there an ETA for the ability to register when all the cells in a RG are rendered?

1 Like

Thanks @chaostorm :slightly_smiling_face: 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.

1 Like

Awesome, thanks for the quick reply - looking forward to it, whenever it ships!

1 Like

Hi there,
I was wondering a couple of things ( i probably should have asked before purchasing!)

  1. Does the checker support sliders that have images inside them?
  2. Have you updated the plugin yet for the full RG load?

I love the idea of the plugin, hopefully it can work for me. I just tried it and I dont think it does for the slider.

Thank you!
Scott