I recently found that at times Adalo can be running quite slow and currently only has loading spinners for when lists are loading. What I found when the servers were running slower (probably due to huge growth which is great by the way) when I added a complex action to a custom button which needed to update multiple fields and do formula calculations, the screen would just be hanging and there was no indication that anything is happening. We all know if it looks like nothing is happening then users go crazy and start pressing buttons over and over again. So, here is a tutorial that I put together which I think is a great solution and very easy to implement.
Here is my screen. The button I want to press is ‘Pay on delivery’.
On the page add an input field and set the styling to blend in with your background. I set font to 0 and removed stroke, set fill to the background blue.
To keep track of the input field I renamed it to ‘spinner input’
I then added a rectangle overlay over all the other content, made it the size of my screen and then change the colour to white and set to semi transparent.
I then turned to lottiefiles.com, found a spinner I liked and changed the colour to match my page
I downloaded the lottie file, opened with text editor and then copied the json text.
I then added the lottie files plugin and dragged the lottie files tile on top of the white overlay I just created, pasted the json into the lottie field and the spinner appeared on my page, on top of my overlay
I then selected both the overlay and the lottie spinner and grouped them together, name the group ‘spinner group’.
Now for the magic! So select the spinner group, change the visibility to sometimes, and add the following (remember the name of your input field?)
Now you can hide the spinner group for now so you can access the other stuff on your page.
Next step is to select your whole page by clicking on the page title and add an action to take place when the user visits the screen and set the details as follows
Now select your custom button and add an action before all of the actions that may cause your app to run slow. The custom action is a very simple action of changing the text in the input field to 1, Adalo handles this very quickly before slowing down for the more complex actions.
So on screen load the spinner input is set to 0 and when you press the custom button it sets the input to 1 and the spinner loads until the rest of the actions are complete and you move on to the next screen.
That’s it. You now have a fully functioning loading spinner for actions!
Let me know if you have any questions. Cheers
