Hi guys, does anyone know of a trick (maybe some CSS or plugin) which we can use to automatically add loading spinners across our Bubble app and on buttons any time a workflow takes more than a few seconds to load?
Or is this something that we need to add manually, by placing loading spinners manually on all the buttons and using custom states at the beginning and end of workflows etc.
Loading spinners are a basic way to improve the UX on an app, letting users know what’s going on so if we can find a simple way to do this across an entire app, I think it will be helpful for other Bubble users in the community.
That’s one option but we would need to put them manually on all of the buttons. I wasn’t sure if there was a simple HTML header we could place on the page to accomplish the same goal in a 15 minutes vs. 6 or 7 hours going through all the buttons in the app
You can you a HTML/CSS spinner. I like SpinKit | Simple CSS Spinners, just paste the HTML into the HTML element, then create inline CSS for the CSS portion.
This is what my element inline looks like, the html in the <div> tag and the css in the <style> tag were pulled directly from the resource Johnny suggested earlier.
Regarding the workflow however, It takes 3 or 4 seconds before the spinner pops up. I set a custom state (yes/no) to “yes” when the button is clicked which triggers the visibility of the spinner. Anyone know a better way to do this so that it appears immediately?
I would recommend just adding it to a popup, then under the “On page load” action show the popup, then create a “When true” workflow for “Page load (entried) is “yes”” hide the popup
