How to create a repeating group loading / Lazy Loading?

Hi Bubble community :wave:

Does anybody knows how to create a repeating group with loading like this ?

1_uTm2p-8-9GMLilvi6tIskQ

@ZeroqodeTeam have a plugin for that but I’ve not tested it myself.

Hi @Jici
I will check it out on their website
Thanks :+1:

1 Like

You can also have a conditional format rule that when the repeating group is loading is “no” then it’s visible, and a placeholder repeating group is visible.

Hi @tylerboodman
I want an animation like that (when repeating group is loading)
is it possible ? (I don’t find it anywhere)

I don’t have much experience but I don’t think you can simply say ‘when the repeating group is loading’, instead I think you need to specify the items which will be displayed, for example, if you are showing a list of User’s favorite colors, you’d say;

When repeating group’s list of User’s favorite colors <1, then show image/animation.

As I say, I’ve not much experience but just throwing my penny’s worth out there!

Hi @darren.james7518
I think you misunderstood…
Sorry for not providing the complete scenario
I have a repeating group with images & text like this (see the end of GIF) :point_down:

But it takes some time to load the repeating group (so “during loading/while it gets loaded” i would like to show an animation like this :point_up_2:)

@sam.morgan any idea/help please ?

This post seems to have a potential solution for you Giphy Animated gif on page load - #4 by gautch

It’s as I thought;

When repeating group items <1, then show GIF animation.
When repeating group items +>1, then HIDE GIF animation.

2 Likes

@darren.james7518
I forgot about GIF :man_facepalming:
Thanks :+1:

2 Likes

Two ways.

The condition is to be the repeating groups’ “is loading” condition on the image component. - image source - Add an animated gif

or
Html element to make visible which will have the loading content lottiefiles animation. Loader Place Holder Animation on Lottiefiles. Free Lottie Animation
with the conditional logic on the html component - while the repeating group is loading condition

1 Like