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.
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.
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
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
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 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.
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.
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 The more feedback we get, the more motivated we are to make things better in Bubble.
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?
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.
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.
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.
Unfortunately, it is not possible to apply the preloading to the input element at the current plugin functionality. But we will investigate how feasible it is to implement this feature in the future plugin update. We can not guarantee that this feature will be implemented in short time frames or provide any estimates, but once we add it - we will announce it in this thread.
Having a problem getting the preloading animation to show up more than once. The use case is to use it for a category menu and sub-menus. The same RG is reused and it’s housed in an RE. I start the Preloader when the RE comes into view, which should be every time since I hide before showing the next (sub)menu. I also clear the RG and repopulate it with new data between all menu changes.
The plugin should work in the reusable element, however, the correct condition is needed.
Can you please let us know, firstly, if the Plugin Elemen is also placed in the Reusable element? Or here is it just a repeating group, but the plugin element is on another page?
Also, in order to reproduce your case on our side, can you share with us the settings of the RG and plugin element, as well as screenshots of all conditions for the elements? It will help us to provide you an exact answer
Looking to hearing from you soon.
Best regards,
Zeroqode Support team
