Busy animation ist no triggered correctly on android

Hi,

I’ve got the following setup.
A form submitting screen and a form editing screen in which I can edit data which I have submitted earlier.
The data is persisted in a SQLite db. While the data is being saved on initial submission or after editing, I want the user to see a whole panel with an animation, while the task is running. I can call the spinner via a UserEvent.

I established this with the following code for saving:

function save(){
	showLoading.raise(); // calling the spinner event

	Database.saveForm(
		// form params
	).then(function(result){
		Notifications.recalculateNotifications();
		hideLoading.raise();		// hiding the spinner
		ModalHelper.showOkModal("success", "success!", function(s) {
		resetForm();
		});
	});
}

And the following code for updating:

function update{
    showLoading.raise();	//as above, calling spinner event

    Database.updateForm(
	// form params
        )
        .then(function(result){

                Notifications.recalculateNotifications();

                hideLoading.raise();		// hiding the spinner 
                ModalHelper.showOkModal("success", "success!", function(s) {

                });
            });

}

both functions seem to be more or less identical. They behave identically on iOS when it comes to calling and hiding the spinner.
On Android however the spinner gets displayed only after the task is finished. This happens only on initial submit of the form. When editing and saving, the busy animation works as intended.

For full clarity, here are my save and update functions from the Database component:


function saveForm(/* params */){

	return new Promise(function(resolve, reject){

		saveTableA(/* params */)
			.then(function(result){

				var objectID = result[0].ID;
				console.log("Form with this ID created: " + objectID);

				saveTableB(/* params */)
					.then(function(result){

						resolve();
					});
			});
	});
}

function updateForm(/* params */ ){

	return new Promise(function(resolve,reject){

		updateTableA(/*paramsA*/)
			.then(function(result){

				updateTableB(/*paramsB*/)
					.then(function(result){

						resolve();
					});
			});
	});
}

is there any way, that the retrieval of the ID in the saveForm method disturbs the correct performance on Android?

Hi Maksym,

as discussed on Slack, we’re waiting for a full, minimal repro to give it a go.

Without seeing much else, it feels like using UserEvents in this case might not be the right approach. You could either simply toggle an Observable boolean in the functions and react on it in UX with WhileTrue/WhileFalse or, alternatively, use the Busy behaviour which also has a nice JavaScript interface.

Let us know if any one of those approaches works out for you!