How to create a repeating group loading / Lazy Loading?

Need help New Responsive Engine
1

Hi Bubble community :wave:

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

1_uTm2p-8-9GMLilvi6tIskQ

2

@ZeroqodeTeam have a plugin for that but Iā€™ve not tested it myself.

3

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

1 Like
4

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.

5

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

6

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!

7

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 ?

8

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
9

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

2 Likes
10

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