How to place modal and spinner on screen until database save operation completes

[box]

I’m having some issues due to users being able to click around while a save operation is completing.
The save operation is triggered by clicking a Save button.

I can easily have the Save button trigger a Show Element to put a modal with a spinner across the screen to prevent screen interaction , but what do I set up in the Workflow area to hide the modal once the database operation completes?

That is, what event in the Workflow am I waiting for before I hide the modal?

In case you’re wondering - in the workflow of the Save button, I tried showing the modal, then doing the save operation to update the thing, then hiding the modal again, but the modal shows and hides so immediately this has no effect b/c the modal does not wait to hide until the save operation actually completes.

Or is there a better way to prevent screen interaction during certain database operations?

[ed727]

I had some similar questions/insights here: Loading animations / progress bars

Generally, I’ve found it difficult to find resources on getting spinners to work properly under various scenarios.

[box]

Solution that worked for me was to create a Custom Event called Hide Modal which just does a Hide action on the Modal floating group element, then add a Trigger in the save button’s actions, which fires off that “hide modal” custom event when the Modified Date field changes on the thing being saved in the database. Works like a champ