we are looking for some help in optimizing a “news feed”. Shortly, we have a repeating group containing various post types: text, image, video etc. Issue is that on the user side, when the feed is scrolled and more and more posts are being loaded, of course, device gets low on resources and the app becomes unresponsive.
Solution for this is to virtualiza the list (which I imagined that Bubble is doing by default, but it isn’t). We are checking whether anyone from the community has faced this issue before and has a good/easy solution for this simple issue.
A repeating group without any optimization seems to actually be unusable (half baked) in real life production scenarios.
you’re likely loading a lot more data in the list than you actually need to
if the data is lightweight the page will easily handle hundreds (even a thousand or so) rows before any noticeable lag.
if you are showing images/videos it is likely that those assets are not optimized for web and are downloading full sized images of mbs instead of just kbs. Videos may also be downloading even if not being played. Blogs/texts maybe are also returning full articles instead of snippets.
check the dev tools to see how much data is actually being downloaded - it’ll likely be the images and videos that are causing you issues.
I recently built an image gallery for an app and it easily loads 1000 images without paging (client wanted to not page it) - the trick here is to use a cdn and to serve optimized assets.
1000 images unoptimized could be 20,000 mbs (high res full size images) or it could be 10mbs (web optimized images of a 100 kbs - or less - each)
It’s not reasonable to say that you’ll never need to cleanup resources when user might spend 2-3h scrolling on the same page. Virtualization is standard practice among list implementations even in native environments, it just uses too many resources to always keep the whole list in DOM/memory
