Know exactly when your repeating group data is completely rendered on the client side.

⚠️⚠️⚠️ NOTE: This plugin is being updated for Bubble's new responsive engine (introduced late 2021) and as such does not yet work with apps that use the new engine.

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.

💻 Demo

🛠️ Editor

🛒**Plugin store**

❓ Support

Setup

• Add the 👁️ Render Checker element to the page anywhere outside of the repeating group
• Add an ID to your repeating group
• Add an ID to the target element you want to monitor (this must be either a text element or an image element)
• Whenever you are about to load the repeating group, add the "setup" action to the workflow. If the repeating group is visible on page load, add the "setup" action on page load. Input the repeating group ID and the target element ID.

Actions

• Setup: Run this on page load (or whenever you load your RG) and specify the RG's unique ID, and the target item's unique ID (screenshot below). Make sure to enable "expose element IDs" in your editor settings to be able to set IDs on the relevant elements.
• Reset: This will reset the "ready" state of the Render Checker element. This is useful when your RG has loaded but you want to be able to watch for a another change subsequently (for example, see the "high-res gallery" example here)

Notes