I’ve seen a bunch of the page loader animation plugins and was able to make them work by making them visible on page load, and then doing conditions that say when page is fully loaded the element is not visible.
Is it possible to use them though when a workflow is running? For example I have a button that when pressed opens a popup to create a record, so the user enters in all their fields and so on and then presses Save. When they press Save, a workflow runs that creates the new record, sends an email, does an API call, and then hides the popup and navigates to the new record page. The problem I find is that it takes 5-10 seconds to do all that before it goes to the page, so it shows that thin progress bar at the top of the page which is fine, but the issue is that users can just close the popup or try to navigate away on their own should they be impatient.
Is there any way to have the page basically freeze almost, and show a loading animation while all workflows run, and then only once they are done have it navigate to the new page so that a user can’t click Save 5 times in a row or close the popup while the workflow is still creating all the records and doing the flow?
There are a few different ways to do this. One simple way is to, at the beginning of the workflow, just show a popup with an icon that spins and not allow them to close it when esc is pressed. Then at the end of the workflow you can hide it. Make the popup look however you want.
I did that. It works while the page is still visible.
I am looking for a solution (loader animation) that will fill the (White-page gap between the current page and the next page loading) while loading to navigate to a new page.
I think I understand. I am not sure if there is a way to fix that beside not going to another page. You can keep everything on one page and create a one-page app. That way you wouldn’t have to send the user to another page and they would just see the loading popup. This helps it feel like a more native and quicker app. Does that make sense?
Yep. I understand what you are saying. My app is too big to be a one-page app (I think). I am building a tutorial app that will have many images, videos, quizes and interactivity. I found a website (not built on Bubble) that does what I want.
Maybe they used a type of javascript thingy to do such magic.
Hi, @andres_0928
I have not yet, found I solution for this.
However, inside the home page, I embedded iframes that show the different pages of my website without the user having to leave the home page.
Pages load faster because the browsers loads the page directly into the iframe and do not need to first leave the current page and then load the page you want to go to.
You can show a spinning icon or loader while the user waits for the page.
Disadvantage
I have noticed that scrolling to the top inside an iframe is a bit off with about 100px or so. It is not a major disadvantage.
There might be another way that works, but I have not seen one yet.
I hope this helps.
