Forum Academy Marketplace Showcase Pricing Features

๐Ÿ“‘ Content Preloader - New Plugin from Zeroqode

This plugin allows you to show animated placeholder elements while the user awaits for the content to be fully loaded. This significantly improves the user experience and gives the feeling of loading progress. Most of the top apps and websites employ this technique, for example Facebook, Asana, Slack and many others.

For documentation please click here: https://docs.zeroqode.com/plugins/content-preloader-plugin

For details, screenshots and demos please visit the plugin page: https://zeroqode.com/plugin/content-preloader-1547522068997x724993284281991200

Levon Terteryan

Founder @ Zeroqode

zeroqode-for-web-160x120

Bubble Templates

Bubble Plugins

Bubble Courses

Convert Web to iOS & Android

No-code Development Services

4 Likes

Good day Levon,

Iโ€™m using this plugin and it works great. I just want to check with you if there are any way I can show animated placeholder triggered by workflow?
The main reason is to hide a famous โ€œissueโ€ with RG. For example user1 is selected, so I can see his friends on the list and when I selected user2 to check his friends, the previous user1 data still remains on the screen for a second. This is very annoying and doesnโ€™t look nice for UX.

Thanks

Hi, @oleksiy!

Thanks for reaching out!

We can give you a hint that might be helpful in achieving your goal. Please note that the following images are only for illustration purpose.
In the workflow when the Page is loaded add the element action- Display list and choose the needed ReapitingGroup

Then when the button is clicked in the first step add the element action- Clear list in the RepeatinGroup


In the second step start preloader

image

In the third step set state for preloader

image

Then add the condition for current cell

To be able to display the other data. Previously was displayed current cellโ€™s text and after the condition was triggered would be displayed the current cellโ€™s title.

Then the forth and the fifth step is to add a pause before the next action and display list in Repeating Group
image

Hope this helps!
Zeroqode Team.

Good day,

Iโ€™m appreciated for your input and time you spend to put it all together, but this doesnโ€™t work for my case. I have tried a numerous time with a different options.

Maybe I didnโ€™t explain well enough what Iโ€™m actually trying to achieve, so here is a bit more details.

  • My app is a single page app consist of groups only and I show or hide them with a state accordingly.
  • I have a groups which contain RG with all my friends.
  • When selected cell with one of my friends is clicked, then โ€œprofileโ€ group shows up with RG where I can see his list, which contain two books. While books are loading I can see a preloader animation and then books shows up already with a title and pictures. All good up to this point.
  • Then I click back button which is hiding a group with selected friend and shows me the list of all my friends again.
  • When I select another my friend, then โ€œprofileโ€ group shows up with RG where I suppose to see 3 books, but instead for a second or two I can see 2 books from the other friend and one book with a preloader animation.
  • In about 2 seconds data is refreshed and I can see 3 new books belong to selected friend.

Iโ€™m using a state to pass the selected user data to the group and RG as a data source. Previously I used a display data, which is much more slower.
So the group which shows a friend โ€œprofileโ€ is a same for all users and I just update user data using a state.

There was quite a few threads o the forum and explanation from Bubble team that this is the way it works at this moment, but as a workaround I was hopping that I can trigger to start preloader from the workflow to show the placeholder for 3 second. If I understood correctly start and stop preloader workflow is to enable or disable a preloader animation when the page is resized. If this is the case then it works as itโ€™s been tested the other day, just out of curiosity.

Thanks,
Oleksiy

Hi, @oleksiy!

Thanks for your clarification and feedback.
Unfortunately, we cannot provide the exact solution with regards to this use case, because is more related to the bubble itself. Apologies for the inconvenience. You may post a separate request on bubble forum regarding this use case.

Not, exactly. Start and Stop plugin actions enable or disable a preloader animation when the data is loading (images, data from database etc). But if after the page is resized there is something need to be loaded then the plugin will work as well.

Best Regards,
Zeroqode Team

Can we change the color of the pre-load animation?

Hello @marius

Thanks for reaching out!

No, not at the moment through pluginโ€™s proprieties unfortunately. Sorry about that. :pray:
Thanks for understanding.

Regards,
Zeroqode Team.

Hello @marius

Thanks for patience :pray:

Weโ€™ve updated the plugin with new feature, to be able to change the pre-load animation colors.
If youโ€™re using the plugin , please upgrade to latest version of it, provide the color values in plugin settings and refresh the application, to give it a try. :pray:

Otherwise you can check out our demo setup - https://bubble.io/page?type=page&name=preloader&id=zeroqode-demo-14&tab=tabs-1
Also doc - https://docs.zeroqode.com/plugins/content-preloader-plugin#introduction
to get an idea how to set it up. :slight_smile:

Regards,
Zeroqode Team.

1 Like

Perfect! looks sooo much better now!

and thank you for getting back to me and letting me know.

@marius thanks for the message.

If you like our plugin you can rate it by going to Plugins tab in Bubble editor. Find the plugin by name and it give it as many stars as it deserves :slight_smile: The more feedback we get, the more motivated we are to make things better in Bubble.

Regards,
Zeroqode Team.

Hi,

Awesome plugin!

But Iโ€™m facing some issue in setting it up and need your help.

I have a single-page app and I want to use this plugin for all repeating groups.

I saw the use of Display List in Repeating group in the editor link that you provided.
Is it necessary to use the display list action? Can it work directly with the Repeating Group?

Thanks
Naman

Hi @fitnet ,

Thanks for reaching out.

Yes, you can use the single plugin element with all of your RepeatingGroup elements.

Yes, it is required to use this action on page load, for example, to display the list in a RepeatingGroup, but it is required to use this action per each RepeatingGroup element.

Best regards,
Zeroqode Team

Thanks for a quick reply.

Iโ€™m getting this issue.

Can you tell me where Iโ€™m going wrong?

Hi @fitnet,

Thanks for feedback. Sorry but have you checked our demo editor and docs to see how the plugin is set up? Because there are some important instructions on ID Attribute naming. Please make sure to use the appropriate names for your RepeatingGroup contents.

If you still encounter the same or any other error, please share more details: screenshots and/or a screencast of your app setups and workflows, so we can replicate the same steps on our side and see where the problem might be.

Also, please tell us what browser and OS you are using to develop your app, and console logs of your browser. :pray:

Best regards,
Zeroqode Team

Hi everyone,
we recently bought this plugin, and works perfect, but I will like to know what are all the ID attributes we can use for.

Because in the docs, appears just:

Preloader id can be: image-preloader, rounded-image-preloader, heading-preloader, text-preloader, button-preloader

But in the demo, they have another 2 new ones and maybe can be handy to have it all.

Thanks in advance

Hello, @daniel_zamora27 !
Thank you for your query!

We are glad to hear, that you are happy with our product:)

About your questions: can you, please, specify, which exactly 2 new IDs in the Demo are you talking about?
Cause the ones used there are: image-preloader, rounded-image-preloader, heading-preloader, text-preloader, and group-preloader. Talking about group-preloader, it is reflected there as image-preloadernew_id. This is the way to specify the ID attribute if you want to apply the preloader effect for the shape or a group.

The button-preloader, which was mentioned by you and is also listed in our documentation for this plugin, wasnโ€™t applied in this particular Demo.

To summarise, kindly inform us where exactly you were thinking to try out the preloader effect, so we can guide you accordingly.

Best regards.
Zeroqode Support Team