I found a description to create “infinite scroll” with only the built-in tools, without using a plugin, on RapidDev:
You are not loading “all data.” You load maybe 20 items first, then when the user scrolls to the bottom, you add 20 more. Bubble re-runs the search with a higher limit, which creates the infinite scroll effect.
It says:
Create a custom state (for example on the page) called items_to_load of type number. Default value: 20.
Set your RG’s Data source to: Search for Things:items until # Parent group’s items_to_load. Replace “Things” with your data type.
Turn the RG scroll type to Vertical scrolling (not full list, not extendable list).
Add workflow event: When RepeatingGroup X is scrolled to bottom.
Inside that event, action: Set state → items_to_load = items_to_load + 20.
This sounds very logical and simple, but I get stuck at step 4: I cannot find where to creat the “When RepeatingGroup X is scrolled to bottom” workflow. E.g. when I say “Do every time” and select my RepeatingGroup there is no “is scrolled to bottom” available. Probably I’m looking at the wrong place, but I somehow ran out of ideas…
Does anyone have an idea how/where to trigger this workflow?
Bubble RGs have infinite scroll / batch loading built in as a standard behaviour (at least, when the datasource is a Bubble Database Search).
So there’s no need to rebuild functionality that is already part of Bubble.
Unless, as I said, for some reason you are disabling the standard Infinite Scroll / batch load behaviour of Bubble RGs and want/need to rebuild it yourself.
Don’t get it, the guy says you load first 20 after that the other 20. I have never heard of the lazy loading infinite scroll while you can specify the number of items. Did you mean, native cap ?
You can’t specify the number of items in Bubble, nor the point at which the next batch of data gets loaded. Bubble handles that automatically.
Like I said, if (for some reason) you want to disable the built-in infinite scroll data loading behaviour and implement your own version (with a custom number of items per request, for example) then that’s fair enough (although there’s no way to do that fully in Vanilla Bubble - you’ll need some custom code to do it).
The point I was making is there is no need/reason to build your own ‘batch’ loading behaviour into a RG for efficient infinite scroll in Bubble as it is already how RGs work when using data from a Search.
In any case, to answer the OP’s original actual question:
There is no such WF event (nor state) in Bubble. The quoted article contains incorrect information.
If you really want to implement your own version of this, you’ll need some custom JS making use of the Intersection Observer API to detect when an element near the end of the RG enters the viewport (ideally a few items before the last one). You can then increase your :items until # (custom state) to load more data.
(‘Vertical Scrolling’ is only a Layout Option for RGs on the old, legacy responsive editor. On the new one it’s just called Scroll Direction: Vertical).
I’ve never seen, and still cannot see (on either the Old Responsive Editor nor on the New One), a Bubble Event (or even a state) for RGs anything like ‘RG is Scrolled to bottom’, nor find any reference to it in the Manual or on the Forum.
Do you have a screenshot of where it can be found?
Why do you need to mimic it? (it’s standard built in Bubble functinoality).
Invisible element at the bottom → trigger “When element is visible” to load more items.
That won’t work (the element will be visible as soon as the cell renders, which is NOT the same thing as when it enters the viewport and will NOT provide the required behaviour).
Use a plugin that handles scroll triggers.
The literal title of this post states ‘WITHOUT PLUGIN’
Button at the bottom → user clicks to load more.
That’s completely different from infinite scroll (which is what this thread is about).
In any case, you didn’t answer my question…
Where is this ‘RG is scrolled to bottom’ Event that you stated exists in your previous reply?
