New Plugin - Loading Overlay

Hey everyone,

we have just released the Loading Overlay Plugin!
This Plugin allows you to display a variety of different overlay Screens which can be used as a Loading Screen or as a Transition screen for your application. The following Overlays can be used:

  • Full-Screen Overlay
  • Element Overlay
  • Text Overlay
  • Image Overlay

With this Plugin you have access to multiple overlays which can help you to increase the user experience of your app and improve the design. For example, you can add an “Element Overlay” to certain elements after the user has performed a certain action to indicate that a workflow is running. Furthermore you can basically create your own loading overlay by just uploading any image you want and using an “Image Overlay.”

For a demo of this Plugin please visit: https://loadingoverlay.bubbleapps.io/

Plugin page: https://bubble.io/plugin/loading-overlay-1566060954374x710059669097545700

Have a great day!
Noel from Anticode

8 Likes

@Anticode Nice work

Quick question - would there be any lag between firing this workflow on ‘When page is loaded’ event? For instance I have a repeating group loading in quite a few cells and for a few seconds it remains empty while loading. Can this loading overlay appear straight away, while in the background elements load in?

Cheers

3 Likes

Hey @luke2!

No there is no lag and the overlay is shown immediately, however the repeating group is also loaded immediately, so if you are only loading very few cells the repeating group content might just be visible for an instant before the overlay appears.
I have created a demo which shows the overlay with a large repeating group: https://loadingoverlay.bubbleapps.io/loadingdemo

I hope that answers your question!

3 Likes

Thanks for letting me know and for the clear demo of it in action, all seems to work pretty smoothly.

Hi,
I bought the plugin now. I want a loading screen while my page/app loads. I tried to use fullscreen overlay “on page load” and also “when user is not logged in” to trigger the overlay. It works… Kind of. But I first see my page. Then the loader shows. I want it to be the other way around. How can I solve that?

1 Like

Hello Mikke,

the loader can only be show once it itself has loaded, which only happens after the page is loaded. This means that there will unfortunately always be a brief moment between page load and showing the loader.

Hi,
Thanks for the reply.

Sadly. That’s really bad. Is there some smart work around?

I’m not sure…
I’ll try to find a solution and will let you know :+1:
Cheers

Hi,
How do I change the color of the “Element Overlay” spinner from black to custom color?

Under the action “Element Overlay” there is a field called “Background Color” where you can change the color of the overlay. The Color of the spinner itself cannot be changed as of now.

Hi Anitcode,
Thanks for your reply.

The fact that I can’t easy add element overlay and pick my color makes this plugin, sadly, useless for me. I have alot of RG’s and I need a smooth overlay on them. Also, I need the overlay to be visible dynamic length (until the RG is loaded).

Hey, any possible way to make the text overlay change the displayed text dynamically across the duration period?

Hey,

no unfortunately that’s currently not possible.

Hey @Anticode - thanks for making this. We’ve paired it with another helpful plugin from @eazycode and a little javascript to make it even more useful, but in test it looks like the overlay isn’t coming up on Safari (for either MacOS or iOS). Is this something that’s on your radar already?

Would love to use this, but we can’t if it doesn’t work for Mac/iPhone users.

1 Like

Hello brian,

hmm thats weird it should work fine on Safari (mac and iOS). I’ve just tested it on my mac and my iphone and it works . Do you maybe have some browser extension installed that blocks the overlays?

Hey @brian ! Which EZ code plugin did you pair it with? Super interested in getting an overlay of my repeating groups but the isLoading feature in bubble is unreliable.

Hey @bubblealex

FYI the Render Checker by SuperStack (i.e. me) might be of interest. It fires an event only once your repeating group cell has been rendered on the browser, not just “loaded” by Bubble. You could use that event to trigger hiding the loading screen in this plugin.

But I’m also curious to see @brian’s setup!

Rob

1 Like