Know exactly when your repeating group data is completely 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.
- 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.
- 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)
- First cell only: The plugin only monitors the first cell of a repeating group. However Bubble typically loads all cells at the same time so there should not be a noticeable difference between the first cell being ready and the remaining cells. I do plan to extend the plugin to wait until all rows in an RG are rendered - this is on the roadmap for v2.
- Images and text - which to target: Often we have a cell with an image and some text. When a new user first loads the page, the image will likely be the slowest item to render due to its size. However, on subsequent visits, the image may render much quicker due to caching and at that point the text may actually be the slower to load. This is a good use case for using 2 Render Checker elements - one for the image and one for the text. Then, when both of the elements "ready" state is true you know that the cell is ready.