My app is only loading 12 cells in Ext. Vertical Scroll even though I have plenty more in the DB. I set the RG as Vertical Scroll and Full List and both will load all the cells. No clue why this is happening, possible bug?
If you change the filter/sort you will see different cells swapping out. On a side note, I’m only getting 8 cells in dev preview which is strange too…
Here is the link to my live app: Kalood.com
Has anyone else had success working with Ext. vertical scrolling?
Ext vertical scrolling does not load all cells. It loads a few more than are visible on the page. Full list loads all but it can get very slow if you have a lot of cells or a lot of information for cells.
Here is an extract from the bubble reference.
Layout style
This is where to define the general layout of the repeating group. There are five possible options:
– Vertical scrolling: The element adds cells as the user scrolls down, but it doesn’t push the elements below it. Instead, users keep scrolling.
– Extendable vertical scrolling: The element adds cells as the user scrolls down, and it pushes the elements below down. This is like Facebook’s feed.
– Full list: The element draws as many cells as needed. This is not the best approach when the list is long.
– Fixed number of cells: Only shows a fixed number of entries. Use the show next/previous actions to navigate in the workflows.
– Horizontal scrolling: The element add cells as the user scrolls right. In this mode, the repeating group can only have one row.The cells are still expandable if the content inside them is ‘Set to stretch to fit content.’
Nice app BTW
I had a couple of thoughts that might be worth investigating … I’ve not done these but I’ve read about them on the forum.
ToolBox Plugin - when you look at their demo editor there is a page(s) related to loading an RG’s content in advance by using the Toolbox’s list feature. The examples were hardcoded, not pulled from a DB, if I remember correctly but take a look and reach out to the creator because I noticed he is good about coming back to people.
Bubble does not load hidden data but it does load data that is ‘hidden’ behind another element because it does not know whether the element is visible or not. Perhaps you could have a longer RG (more cells in your setup) but position the RG so some of it is off the end of the page, or perhaps you could load up a very tiny transparent version hidden behind something and then your main RG could refer to the tiny covered over RG.
Wish I could be more helpful but those are two things I’ve seen mentioned elsewhere on the forum.
– Extendable vertical scrolling: The element adds cells as the user scrolls down, and it pushes the elements below down. This is like Facebook’s feed.
Shouldn’t my app be loading more cells as you scroll down? @emmanuel
Link to my live app: Kalood.com
It is. I see the first few rows of cards and when I scroll down I see another row, then a partial row … and then there is a pause while bubble goes and gets more data to display. If you look at bubble’s own template marketplace it is exactly the same https://bubble.io/templates
Thats weird, is it loading more cards for you? On multiple devices on my end it loads the first couple rows and doesn’t load anymore…
Yes it is loading more cards for me on both my MacBook and my iPhone 6S Plus. I don’t have any other equipment at the minute. Is the bubble page working when you try it?
Your page certainly works but it is slow while it finds the next items and displays them. I have to be patient. Although I believe the more you run it the faster it gets because bubble builds indexes in the background.
@dnljsn I don’t think there is a way to force bubble to get the next ‘x’ records but I just thought of something that might be worth experimenting with. You could load the repeating group on page load with 10 or 12 items. Then have a second RG behind it (positioned exactly) that is loading 50 or 100 or something. Then when the large RG has loaded you could hide the initial one that loaded faster. If you have an element behind another element (not hidden) then bubble does not know if it can be seen so they load it. I’ve no idea if the user would see a flicker when you hide the shorter RG but I doubt it. You would, however, have to ensure you scrolled the second RG as the user scrolls the first one. This sounds like a bit of a hack but I can’t think of an alternative for you. Hope someone can come up with something better.
Only showing 8 cards for me…
I’m seeing 8, then I try to scroll down and another eight appear, then a third eight appear, then another five or six. The cards are appearing faster now than they were so bubble has been optimising the search.
The second eight is the slowest to load. It is like as if bubble displays the first eight because you loaded them, then when I scroll it goes “Oh, she wants more” and that has a lag, and then it seems to realise that I’m likely to continue scrolling down and it displays faster from then on.
The slowness may be something to do with the plan you are on. You may need extra capacity. There is a setting in Settings, App Plan where you can turn on a free Capacity Temporary Boost for an hour (twice a month) and that might improve performance. Try some timings and see what happens.
Nope, still cannot figure out why it’s working in some places and not in others…
Would @romanmg @NigelG or @emmanuel have and insight on this?
You never told me if you can see the bubble templates page loading correctly or not because it is very similar to your page with cards of a similar size and similar content. They are using their own Ext Vertical Scroll so if that page works for you then it has to be something on your end that is the problem. I don’t think it would be image size because I read Emmuael say on a post somewhere that they try to optimise images when saving them but it might be worth investigation. I presume you are saving them 72 DPI.
The cards on https://bubble.io/templates are loading for me and the lag time is not a problem (1-2 second wait).
However, I have made a new discovery: I can always load 2 initial rows. Screen size will determine how many cards will load. I have found that if I zoom the page size out I can get more cards but the problem still persists. I cannot load more by scrolling down no matter the page size.
I have turned on developer tools on chrome and did an “Empty Cache and Hard Reload” and still not working so it’s not a caching issue… I am honestly baffled why this is happening. I am open to any more ideas or discoveries!
I’m getting very weird visuals here and I’ve updated everything. I can now see it loading on my MacBook on FireFox and Safari, a little faster on FireFox as you would expect. On Chrome, it loads the first eight and no further.
On my iPhone, Chrome loads 8 and eventually another 2 (minutes later). In Safari it loads 8 + 4 and sticks and on FireFox it loads 8 + 2 +2 but very very slowly and then sticks.
So to images again. Have you saved them as 72 DPI?
Hey @dnljsn, first off - cool site! Great job with it.
Try this - give the bottom of the page a little more room. To me it seems that you’re not giving it enough runway for the scroll to trigger loading more cards.
If that doesn’t work, try replacing the RG with a completely new one. OR - try copy pasting the existing onto a blank test page to see if you can isolate the issue. Maybe it’s not the RG, maybe there’s something else going on in the page. Do you have any extra code in your page’s header?
How you scroll can also make a difference.
For example on Bubble’s plugins page, if I jump to the end, or page down and miss the end of the list, it doesn’t load more rows even if I go back up to get them.
Whereas scrolling down gradually does get more rows …
Maybe @romanmg can redesign Bubble’s plugins page to fix it, heh heh.
EDIT - looks like its a lot faster now since the redesign perhaps.
@romanmg Thank you! The platform has been a long time coming.
You are a genius! This is not the first time you have solved one of my issues. You were right about having extra code in my header, I had done some custom code because I was having issues with my popup boxes on mobile not scrolling and totally forgot about the header code.
I will have to give you some in-store credit in the future on Kalood.com for all the help you have provided along the way. THANK YOU!
